正則表達(dá)式是處理文本、數(shù)據(jù)的一劑良藥澳化，吃久了吃慣了才不覺得苦崔步，PO主久病多年苦無良醫(yī)，所以搗鼓了一些針對web前端方面的偏方缎谷。
【 功能主治 】
適用于以下人群及癥狀：
- 內(nèi)容妹紙：從網(wǎng)上拷下來的文章樣式太亂井濒，拿人手短。列林。瑞你。
- 前端妹紙：某些內(nèi)容的排版太繁瑣，不想浪費(fèi)青春希痴。者甲。。
- 爬蟲漢子：扒到的文章內(nèi)容有點(diǎn)污砌创，不想手洗虏缸。鲫懒。。
【 禁忌人群 】
以下人群可能存在不良反應(yīng)刽辙，請慎用此方：
- 歲月靜好窥岩，不怕麻煩和浪費(fèi)青春的；
- 有更牛X解決方案的扫倡；
- 覺得我本人無聊的谦秧。。撵溃。
下面以JS代碼舉例疚鲤，主要介紹本人百無聊賴時(shí)總結(jié)出的一些短（lai）小（da）精（wo）悍（ya）的代碼缘挑，用來重新定義和優(yōu)化網(wǎng)頁上的文章內(nèi)容集歇。
一、行內(nèi)樣式语淘，洗洗更健康
對于 css 樣式來說诲宇，諸如 style="..." 和 height="..." 這樣的行內(nèi)樣式，由于其優(yōu)先級較高惶翻，容易一上場就干掉很多我們殫精竭慮碼完的 css 樣式姑蓝。因此，如果你手里頭有類似于下面這段 html 的代碼吕粗，請務(wù)必先洗一洗：
<div id="news-content" class="news-content"><!--content_start--><!--content_start--><p> 2016年10月20日纺荧，在第七屆中國高成長企業(yè)CEO峰會(huì)上，第十一屆“中國最具投資價(jià)值企業(yè)50強(qiáng)”評選榜單（以下簡稱V50榜單）正式發(fā)布颅筋。該榜自2006年以來宙暇，至今已舉辦十一年之久，是投資界首個(gè)專注高成長企業(yè)的年度評選活動(dòng)议泵，被譽(yù)為“行業(yè)投資風(fēng)向標(biāo)”占贫。</p><p> 本屆榜單在2015年風(fēng)格的基礎(chǔ)上進(jìn)行了微調(diào)，根據(jù)企業(yè)發(fā)展的不同階段與規(guī)模先口，將“中國最具投資價(jià)值企業(yè)50強(qiáng)”榜單評選型奥，細(xì)分為“風(fēng)云榜”（融資階段A輪及其以后的未上市企業(yè)）和“新芽榜”（融資階段A輪以前的未上市企業(yè)，創(chuàng)立時(shí)間兩年以內(nèi)）碉京。</p><p> 本屆V50評選桩引，自2016年3月初全面啟動(dòng)以來，廣泛征集報(bào)名企業(yè)收夸，經(jīng)首輪篩選進(jìn)入初評的企業(yè)達(dá)1000+，再通過嚴(yán)格的初評和復(fù)評血崭，匯聚了近百位投資界“意見領(lǐng)袖”及<a target="_blank">精英</a>們的專業(yè)意見卧惜，最終締造了本屆中國最具投資價(jià)值企業(yè)風(fēng)云榜50強(qiáng)和新芽榜50強(qiáng)厘灼！</p><div><table border="1"><tbody><tr><td colspan="3"><p style="text-align:center;"><b>2016</b><b>年第十一屆中國最具投資價(jià)值企業(yè)50強(qiáng)榜單·新芽榜</b></p><p style="text-align:center;">（此榜單排名不分先后，按企業(yè)全稱首字母排序）</p></td></tr><tr><td><p><b>序號</b></p></td><td><p><b>企業(yè)簡稱</b></p></td><td><p><b>公司名稱</b></p></td></tr><tr><td><p><b>1</b></p></td><td><p><a target="_blank">POMCube</a></p></td><td><p><a target="_blank">POMCube</a><a target="_blank">Inc</a>.</p></td></tr><tr><td><p><b>2</b></p></td><td><p><a target="_blank">京華未來</a></p></td><td><p>北京<a target="_blank">京華未來</a>機(jī)器人科技有限公司</p></td></tr><tr><td><p><b>3</b></p></td><td><p>玲瓏</p></td><td><p>北京<a target="_blank">科玲文化科技</a>有限公司</p></td></tr><tr><td><p><b>4</b></p></td><td><p>聯(lián)想<a target="_blank">智慧</a>醫(yī)療</p></td><td><p>北京聯(lián)想<a target="_blank">智慧</a>醫(yī)療信息技術(shù)公司</p></td></tr><tr><td><p><b>5</b></p></td><td><p>靈犀微光</p></td><td><p>北京靈犀微光科技有限公司</p></td></tr><tr><td><p><b>6</b></p></td><td><p><a target="_blank">美信金融</a></p></td><td><p>北京美信眾誠科技有限公司</p></td></tr><tr><td><p><b>7</b></p></td><td><p><a target="_blank">魔視互動(dòng)</a></p></td><td><p>北京<a target="_blank">魔視互動(dòng)</a>科技有限公司</p></td></tr><tr><td><p><b>8</b></p></td><td><p>魔數(shù)科技</p></td><td><p>北京魔數(shù)科技有限公司</p></td></tr><tr><td><p><b>9</b></p></td><td><p><a target="_blank">潛力股</a></p></td><td><p>北京<a target="_blank">潛力股</a>科技有限公司</p></td></tr><tr><td><p><b>10</b></p></td><td><p>斑馬社</p></td><td><p>北京青云<a target="_blank">互幫</a>網(wǎng)絡(luò)科技有限公司</p></td></tr><tr><td><p><b>11</b></p></td><td><p>深鑒科技</p></td><td><p>北京深鑒科技有限公司</p></td></tr><tr><td><p><b>12</b></p></td><td><p>住范兒</p></td><td><p>北京<a target="_blank">水木優(yōu)品</a>科技有限公司</p></td></tr><tr><td><p><b>13</b></p></td><td><p>萬娛引力</p></td><td><p>北京萬娛引力文化傳媒有限公司</p></td></tr><tr><td><p><b>14</b></p></td><td><p>細(xì)刻科技</p></td><td><p>北京細(xì)刻網(wǎng)絡(luò)科技有限公司</p></td></tr><tr><td><p><b>15</b></p></td><td><p>醫(yī)洋科技</p></td><td><p>北京醫(yī)洋科技有限公司</p></td></tr><tr><td><p><b>16</b></p></td><td><p>藝妙神州</p></td><td><p>北京藝妙<a target="_blank">神州醫(yī)療</a>科技有限公司</p></td></tr><tr><td><p><b>17</b></p></td><td><p>有序科技</p></td><td><p>北京有序科技有限公司</p></td></tr><tr><td><p><b>18</b></p></td><td><p>91金服</p></td><td><p>北京眾智人人信息科技有限責(zé)任公司</p></td></tr><tr><td><p><b>19</b></p></td><td><p>水滴互助</p></td><td><p>北京<a target="_blank">縱情向前</a>科技有限公司</p></td></tr><tr><td><p><b>20</b></p></td><td><p><a target="_blank">天儀研究院</a></p></td><td><p>長沙天儀空間科技研究院有限公司</p></td></tr><tr><td><p><b>21</b></p></td><td><p><a target="_blank">11Space</a></p></td><td><p>暢聯(lián)管理咨詢（北京）有限公司</p></td></tr><tr><td><p><b>22</b></p></td><td><p><a target="_blank">比呀比</a></p></td><td><p>廣州<a target="_blank">比呀比</a>信息科技有限公司</p></td></tr><tr><td><p><b>23</b></p></td><td><p><a target="_blank">金華</a>佗</p></td><td><p>廣州杜仲哥互聯(lián)網(wǎng)科技有限公司</p></td></tr><tr><td><p><b>24</b></p></td><td><p>康立明生物</p></td><td><p>廣州市康立明生物科技有限責(zé)任公司</p></td></tr><tr><td><p><b>25</b></p></td><td><p>國民認(rèn)證</p></td><td><p>國民認(rèn)證科技（北京）有限公司</p></td></tr><tr><td><p><b>26</b><b></b></p></td><td><p><a target="_blank">維權(quán)騎士</a></p></td><td><p>杭州刀豆網(wǎng)絡(luò)科技有限公司</p></td></tr><tr><td><p><b>27</b><b></b></p></td><td><p><a target="_blank">文簽網(wǎng)絡(luò)</a></p></td><td><p>杭州<a target="_blank">文簽網(wǎng)絡(luò)</a>技術(shù)有限公司</p></td></tr><tr><td><p><b>28</b><b></b></p></td><td><p>空中云匯</p></td><td><p>空中云匯（深圳）網(wǎng)絡(luò)科技有限公司</p></td></tr><tr><td><p><b>29</b><b></b></p></td><td><p>愛諾醫(yī)藥</p></td><td><p>寧波愛諾醫(yī)藥科技有限公司</p></td></tr><tr><td><p><b>30</b><b></b></p></td><td><p><a target="_blank">埃德斯</a></p></td><td><p>上海<a target="_blank">埃德斯</a>生物科技有限公司</p></td></tr><tr><td><p><b>31</b><b></b></p></td><td><p>幼師口袋</p></td><td><p>上海必加教育科技有限公司</p></td></tr><tr><td><p><b>32</b><b></b></p></td><td><p>果藤金融</p></td><td><p>上海果藤互聯(lián)網(wǎng)金融信息服務(wù)有限公司</p></td></tr><tr><td><p><b>33</b><b></b></p></td><td><p>禾賽科技</p></td><td><p>上海禾賽<a target="_blank">光電科技</a>有限公司</p></td></tr><tr><td><p><b>34</b><b></b></p></td><td><p><a target="_blank">金棗金融</a></p></td><td><p>上海<a target="_blank">金棗金融</a>信息服務(wù)有限公司</p></td></tr><tr><td><p><b>35</b><b></b></p></td><td><p>哮喘管家</p></td><td><p>上海朔茂網(wǎng)絡(luò)科技有限公司</p></td></tr><tr><td><p><b>36</b><b></b></p></td><td><p>烯牛數(shù)據(jù)</p></td><td><p>上海烯牛信息技術(shù)有限公司</p></td></tr><tr><td><p><b>37</b><b></b></p></td><td><p>朋友印象</p></td><td><p>上海<a target="_blank">閱人信息技術(shù)</a>有限公司</p></td></tr><tr><td><p><b>38</b><b></b></p></td><td><p>快金數(shù)據(jù)</p></td><td><p>深圳快金數(shù)據(jù)技術(shù)服務(wù)有限公司</p></td></tr><tr><td><p><b>39</b><b></b></p></td><td><p>萊斯購</p></td><td><p>深圳市萊斯購電子商務(wù)有限公司</p></td></tr><tr><td><p><b>40</b><b></b></p></td><td><p>尋材問料</p></td><td><p>深圳市尋材問料網(wǎng)絡(luò)科技有限公司</p></td></tr><tr><td><p><b>41</b><b></b></p></td><td><p>萬<a target="_blank">瑞達(dá)</a>生物</p></td><td><p>深圳萬<a target="_blank">瑞達(dá)</a>生物科技有限公司</p></td></tr><tr><td><p><b>42</b><b></b></p></td><td><p>英美達(dá)</p></td><td><p>深圳英美達(dá)醫(yī)療技術(shù)有限公司</p></td></tr><tr><td><p><b>43</b><b></b></p></td><td><p>0glass</p></td><td><p>深圳增強(qiáng)現(xiàn)實(shí)技術(shù)有限公司</p></td></tr><tr><td><p><b>44</b><b></b></p></td><td><p>歐瑞吉醫(yī)藥</p></td><td><p>四川歐瑞吉生物醫(yī)藥股份有限公司</p></td></tr><tr><td><p><b>45</b><b></b></p></td><td><p>玩咖</p></td><td><p>玩咖歡聚文化傳媒（北京）有限公司</p></td></tr><tr><td><p><b>46</b><b></b></p></td><td><p>一起火</p></td><td><p>衣旗（杭州）科技有限公司</p></td></tr><tr><td><p><b>47</b><b></b></p></td><td><p>標(biāo)準(zhǔn)普惠</p></td><td><p>頤月信息技術(shù)（北京）有限公司</p></td></tr><tr><td><p><b>48</b><b></b></p></td><td><p>水滴科技</p></td><td><p>銀河水滴科技（北京）有限公司</p></td></tr><tr><td><p><b>49</b><b></b></p></td><td><p>娛貓</p></td><td><p>娛貓（北京）科技有限公司</p></td></tr><tr><td><p><b>50</b><b></b></p></td><td><p>北斗云點(diǎn)</p></td><td><p>珠海北斗云點(diǎn)信息技術(shù)有限公司</p></td></tr></tbody></table></div><p style="text-align:center;"></p><p> <b>關(guān)于<a target="_blank">清科集團(tuán)</a></b></p><p> <a target="_blank">清科集團(tuán)</a>：成立于1999年咽瓷，是中國領(lǐng)先的創(chuàng)業(yè)與投資綜合服務(wù)平臺及投資機(jī)構(gòu)设凹。旗下包括：清科研究中心、清科傳媒茅姜、清科資本闪朱、清科財(cái)富、<a target="_blank">清科創(chuàng)投</a>钻洒、清科母基金奋姿。主要業(yè)務(wù)涉及：研究咨詢、數(shù)據(jù)產(chǎn)品素标、會(huì)議論壇称诗、信息資訊、投資銀行服務(wù)头遭、直接投資寓免、母基金管理及財(cái)富管理。</p><!--content_end--><!--content_pagestart--> <!--content_pageend--></div>
首先來清理一下這一坨里面的形如 `````` 這樣的注釋語句和一些換行符（\n, \t, \r）：
// 這里用htmlStr表示剛才你看到的上面那一坨
let htmlStr = '...';
// 匹配無用代碼的正則
let pattForUselessCode = /(\n|\t|\r|\<\!\-\-[^\>]*\-\-\>)/gi;
// 將匹配項(xiàng)替換為空字符(即將無用代碼從html字符串中剔除)
htmlStr = htmlStr.replace(pattForUselessCode, '');
接下來计维，清理 style="..." 形式的行內(nèi)樣式：
let pattForStyleInline = /\s(style)\=\"[^\"]*\"/gi; // 匹配行內(nèi)樣式的正則
htmlStr = htmlStr.replace(pattForStyleInline, '');
清理 height="..." 形式的行內(nèi)樣式（主要目的在于清理 <img> 元素的行內(nèi)寬度和高度袜香，方便你在 css 中自己定義新的樣式）：
let pattForSizeInline = /(\s(height)\=\"[^\"]*\"|\s(width)\=\"[^\"]*\")/gi; // 匹配行內(nèi)高、寬的正則
htmlStr = htmlStr.replace(pattForSizeInline, '');
注意：適當(dāng)留下些有用的東西鲫惶，比如：將 <p> 標(biāo)簽的 style="text-align:center" 的樣式通過 class 保留下來蜈首，我們可以知道哪些文字需要居中；將標(biāo)簽原有的 id, class 等內(nèi)容保留下來剑按，也方便我們后期豐富 css 細(xì)節(jié)時(shí)疾就，可以直接使用：
// 匹配文字水平居中的p標(biāo)簽的正則
let pattForTextHorizontally = /\<p[^(style|\>)]+style\=\"[^(\"|text)]*text\-align\:center\;[^\"]*\"[^\>]*\>/gi;
// 將<p style="...text-align:center...">替換為<p class="text-center">，而.text-center元素的樣式你可以在css里面自己定義
htmlStr = htmlStr.replace(pattForTextHorizontally, '<p class="text-center">');
做完上面這些工作艺蝴，你就可以安安心心去寫 css 了猬腰。。猜敢。這里我就不贅述了姑荷。。缩擂。
靈活運(yùn)用標(biāo)簽和選擇器鼠冕，你會(huì)發(fā)現(xiàn)，大多數(shù)網(wǎng)站的文章內(nèi)容胯盯，雖然標(biāo)簽懈费、結(jié)構(gòu)不盡相同，但你仍能統(tǒng)一他們的表現(xiàn)風(fēng)格博脑。畢竟憎乙，經(jīng)過清洗后留下來的東西票罐，都是比較簡單清晰的結(jié)構(gòu)。
最開始的那一坨泞边，經(jīng)過清理后该押，大概長這樣：
<div id="news-content" class="news-content"><p> 2016年10月20日，在第七屆中國高成長企業(yè)CEO峰會(huì)上阵谚，第十一屆“中國最具投資價(jià)值企業(yè)50強(qiáng)”評選榜單（以下簡稱V50榜單）正式發(fā)布蚕礼。該榜自2006年以來，至今已舉辦十一年之久梢什，是投資界首個(gè)專注高成長企業(yè)的年度評選活動(dòng)奠蹬，被譽(yù)為“行業(yè)投資風(fēng)向標(biāo)”。</p><p> 本屆榜單在2015年風(fēng)格的基礎(chǔ)上進(jìn)行了微調(diào)绳矩，根據(jù)企業(yè)發(fā)展的不同階段與規(guī)模罩润，將“中國最具投資價(jià)值企業(yè)50強(qiáng)”榜單評選，細(xì)分為“風(fēng)云榜”（融資階段A輪及其以后的未上市企業(yè)）和“新芽榜”（融資階段A輪以前的未上市企業(yè)翼馆，創(chuàng)立時(shí)間兩年以內(nèi)）割以。</p><p> 本屆V50評選，自2016年3月初全面啟動(dòng)以來应媚，廣泛征集報(bào)名企業(yè)严沥，經(jīng)首輪篩選進(jìn)入初評的企業(yè)達(dá)1000+，再通過嚴(yán)格的初評和復(fù)評中姜，匯聚了近百位投資界“意見領(lǐng)袖”及精英們的專業(yè)意見消玄，最終締造了本屆中國最具投資價(jià)值企業(yè)風(fēng)云榜50強(qiáng)和新芽榜50強(qiáng)！</p><div><table cellpadding="0" cellspacing="0"><tbody><tr class="light-row"><td colspan="3"><p class="text-center"><b>2016</b><b>年第十一屆中國最具投資價(jià)值企業(yè)50強(qiáng)榜單·新芽榜</b></p><p class="text-center">（此榜單排名不分先后丢胚，按企業(yè)全稱首字母排序）</p></td></tr><tr><td class="dark-line"><p><b>序號</b></p></td><td><p><b>企業(yè)簡稱</b></p></td><td class="dark-line"><p><b>公司名稱</b></p></td></tr><tr class="light-row"><td class="dark-line"><p><b>1</b></p></td><td><p>POMCube</p></td><td class="dark-line"><p>POMCubeInc.</p></td></tr><tr><td class="dark-line"><p><b>2</b></p></td><td><p>京華未來</p></td><td class="dark-line"><p>北京京華未來機(jī)器人科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>3</b></p></td><td><p>玲瓏</p></td><td class="dark-line"><p>北京科玲文化科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>4</b></p></td><td><p>聯(lián)想智慧醫(yī)療</p></td><td class="dark-line"><p>北京聯(lián)想智慧醫(yī)療信息技術(shù)公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>5</b></p></td><td><p>靈犀微光</p></td><td class="dark-line"><p>北京靈犀微光科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>6</b></p></td><td><p>美信金融</p></td><td class="dark-line"><p>北京美信眾誠科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>7</b></p></td><td><p>魔視互動(dòng)</p></td><td class="dark-line"><p>北京魔視互動(dòng)科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>8</b></p></td><td><p>魔數(shù)科技</p></td><td class="dark-line"><p>北京魔數(shù)科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>9</b></p></td><td><p>潛力股</p></td><td class="dark-line"><p>北京潛力股科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>10</b></p></td><td><p>斑馬社</p></td><td class="dark-line"><p>北京青云互幫網(wǎng)絡(luò)科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>11</b></p></td><td><p>深鑒科技</p></td><td class="dark-line"><p>北京深鑒科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>12</b></p></td><td><p>住范兒</p></td><td class="dark-line"><p>北京水木優(yōu)品科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>13</b></p></td><td><p>萬娛引力</p></td><td class="dark-line"><p>北京萬娛引力文化傳媒有限公司</p></td></tr><tr><td class="dark-line"><p><b>14</b></p></td><td><p>細(xì)刻科技</p></td><td class="dark-line"><p>北京細(xì)刻網(wǎng)絡(luò)科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>15</b></p></td><td><p>醫(yī)洋科技</p></td><td class="dark-line"><p>北京醫(yī)洋科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>16</b></p></td><td><p>藝妙神州</p></td><td class="dark-line"><p>北京藝妙神州醫(yī)療科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>17</b></p></td><td><p>有序科技</p></td><td class="dark-line"><p>北京有序科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>18</b></p></td><td><p>91金服</p></td><td class="dark-line"><p>北京眾智人人信息科技有限責(zé)任公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>19</b></p></td><td><p>水滴互助</p></td><td class="dark-line"><p>北京縱情向前科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>20</b></p></td><td><p>天儀研究院</p></td><td class="dark-line"><p>長沙天儀空間科技研究院有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>21</b></p></td><td><p>11Space</p></td><td class="dark-line"><p>暢聯(lián)管理咨詢（北京）有限公司</p></td></tr><tr><td class="dark-line"><p><b>22</b></p></td><td><p>比呀比</p></td><td class="dark-line"><p>廣州比呀比信息科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>23</b></p></td><td><p>金華佗</p></td><td class="dark-line"><p>廣州杜仲哥互聯(lián)網(wǎng)科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>24</b></p></td><td><p>康立明生物</p></td><td class="dark-line"><p>廣州市康立明生物科技有限責(zé)任公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>25</b></p></td><td><p>國民認(rèn)證</p></td><td class="dark-line"><p>國民認(rèn)證科技（北京）有限公司</p></td></tr><tr><td class="dark-line"><p><b>26</b><b></b></p></td><td><p>維權(quán)騎士</p></td><td class="dark-line"><p>杭州刀豆網(wǎng)絡(luò)科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>27</b><b></b></p></td><td><p>文簽網(wǎng)絡(luò)</p></td><td class="dark-line"><p>杭州文簽網(wǎng)絡(luò)技術(shù)有限公司</p></td></tr><tr><td class="dark-line"><p><b>28</b><b></b></p></td><td><p>空中云匯</p></td><td class="dark-line"><p>空中云匯（深圳）網(wǎng)絡(luò)科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>29</b><b></b></p></td><td><p>愛諾醫(yī)藥</p></td><td class="dark-line"><p>寧波愛諾醫(yī)藥科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>30</b><b></b></p></td><td><p>埃德斯</p></td><td class="dark-line"><p>上海埃德斯生物科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>31</b><b></b></p></td><td><p>幼師口袋</p></td><td class="dark-line"><p>上海必加教育科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>32</b><b></b></p></td><td><p>果藤金融</p></td><td class="dark-line"><p>上海果藤互聯(lián)網(wǎng)金融信息服務(wù)有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>33</b><b></b></p></td><td><p>禾賽科技</p></td><td class="dark-line"><p>上海禾賽光電科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>34</b><b></b></p></td><td><p>金棗金融</p></td><td class="dark-line"><p>上海金棗金融信息服務(wù)有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>35</b><b></b></p></td><td><p>哮喘管家</p></td><td class="dark-line"><p>上海朔茂網(wǎng)絡(luò)科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>36</b><b></b></p></td><td><p>烯牛數(shù)據(jù)</p></td><td class="dark-line"><p>上海烯牛信息技術(shù)有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>37</b><b></b></p></td><td><p>朋友印象</p></td><td class="dark-line"><p>上海閱人信息技術(shù)有限公司</p></td></tr><tr><td class="dark-line"><p><b>38</b><b></b></p></td><td><p>快金數(shù)據(jù)</p></td><td class="dark-line"><p>深圳快金數(shù)據(jù)技術(shù)服務(wù)有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>39</b><b></b></p></td><td><p>萊斯購</p></td><td class="dark-line"><p>深圳市萊斯購電子商務(wù)有限公司</p></td></tr><tr><td class="dark-line"><p><b>40</b><b></b></p></td><td><p>尋材問料</p></td><td class="dark-line"><p>深圳市尋材問料網(wǎng)絡(luò)科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>41</b><b></b></p></td><td><p>萬瑞達(dá)生物</p></td><td class="dark-line"><p>深圳萬瑞達(dá)生物科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>42</b><b></b></p></td><td><p>英美達(dá)</p></td><td class="dark-line"><p>深圳英美達(dá)醫(yī)療技術(shù)有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>43</b><b></b></p></td><td><p>0glass</p></td><td class="dark-line"><p>深圳增強(qiáng)現(xiàn)實(shí)技術(shù)有限公司</p></td></tr><tr><td class="dark-line"><p><b>44</b><b></b></p></td><td><p>歐瑞吉醫(yī)藥</p></td><td class="dark-line"><p>四川歐瑞吉生物醫(yī)藥股份有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>45</b><b></b></p></td><td><p>玩咖</p></td><td class="dark-line"><p>玩咖歡聚文化傳媒（北京）有限公司</p></td></tr><tr><td class="dark-line"><p><b>46</b><b></b></p></td><td><p>一起火</p></td><td class="dark-line"><p>衣旗（杭州）科技有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>47</b><b></b></p></td><td><p>標(biāo)準(zhǔn)普惠</p></td><td class="dark-line"><p>頤月信息技術(shù)（北京）有限公司</p></td></tr><tr><td class="dark-line"><p><b>48</b><b></b></p></td><td><p>水滴科技</p></td><td class="dark-line"><p>銀河水滴科技（北京）有限公司</p></td></tr><tr class="light-row"><td class="dark-line"><p><b>49</b><b></b></p></td><td><p>娛貓</p></td><td class="dark-line"><p>娛貓（北京）科技有限公司</p></td></tr><tr><td class="dark-line"><p><b>50</b><b></b></p></td><td><p>北斗云點(diǎn)</p></td><td class="dark-line"><p>珠海北斗云點(diǎn)信息技術(shù)有限公司</p></td></tr></tbody></table></div><p class="text-center"></p><p> <b>關(guān)于清科集團(tuán)</b></p><p> 清科集團(tuán)：成立于1999年翩瓜，是中國領(lǐng)先的創(chuàng)業(yè)與投資綜合服務(wù)平臺及投資機(jī)構(gòu)。旗下包括：清科研究中心携龟、清科傳媒兔跌、清科資本、清科財(cái)富峡蟋、清科創(chuàng)投坟桅、清科母基金。主要業(yè)務(wù)涉及：研究咨詢蕊蝗、數(shù)據(jù)產(chǎn)品仅乓、會(huì)議論壇、信息資訊蓬戚、投資銀行服務(wù)夸楣、直接投資、母基金管理及財(cái)富管理。</p> </div>
二裕偿、兩句正則實(shí)現(xiàn)復(fù)雜的 table 明暗交替樣式
一般情況下洞慎，像 <table> 這樣的東西，從幾千年前活到現(xiàn)在嘿棘，難免有些歷史遺留的臭毛病，為保險(xiǎn)起見旭绒，很多站點(diǎn)在拿到類似元素時(shí)鸟妙，并沒有花太多功夫去美化修飾，所以一臭百臭挥吵。
下面是新芽（newseed）網(wǎng)站上的一篇文章的截圖重父，可以看出，對于 table 標(biāo)簽的樣式忽匈，適配的很不好房午，為曾經(jīng)懷揣設(shè)計(jì)理想的我所不能容忍。
某網(wǎng)站文章頁面對 table 標(biāo)簽的適配效果
再下面是鄙人使用從該頁面扒下來的同樣的 html 結(jié)構(gòu)實(shí)現(xiàn)的效果：
改良后的效果
披了一件華麗的外套丹允，與光著身子示人的感覺郭厌，畢竟有云泥之別。雕蔽。折柠。
第二張圖的樣式，實(shí)現(xiàn)起來方法很多批狐，主要的難點(diǎn)在于每行的背景色扇售、每列的背景色都是明暗相間的。這個(gè)效果做起來嚣艇，實(shí)現(xiàn)的方法有很多種：
如果在客戶端渲染頁面承冰，可以基于 DOM 操作：
通過寫一個(gè)或兩個(gè)
for循環(huán) 給<tr><td>根據(jù)奇、偶數(shù)添加相應(yīng)標(biāo)記食零，如： 奇數(shù)列<td class="light">偶數(shù)列<td class="dark">困乒，然后 css 再進(jìn)行統(tǒng)一修飾。再考慮
:nth-child(even):nth-child(odd)這樣的 css 偽類選擇器寫法慌洪，同樣可以實(shí)現(xiàn)顶燕；或者用 jQuery 實(shí)現(xiàn)：
$("#tab tr:nth-child(even)").addClass("evenRow"); // 添加偶數(shù)行樣式
$("#tab tr:nth-child(odd)").addClass("oddRow"); // 添加奇數(shù)行樣式
$("#tab td:nth-child(even)").addClass("evenCol"); // 添加偶數(shù)列樣式
$("#tab td:nth-child(odd)").addClass("oddCol"); // 添加奇數(shù)列樣式
基于本文最初提到的那“坨” html 字符串，無從談起操作 DOM冈爹，因而直接操作字符串：
// 表格 - 奇數(shù)行淺灰
htmlStr = htmlStr.replace(/\<tr\>(.*?\<\/tr\>\<tr\>.*?\<\/tr\>)/gi, '<tr style="background:#f8f8f8;">$1');
// 表格 - 奇數(shù)列淺灰（使用半透明色值涌攻，與上面的行的背景色進(jìn)行疊加）
htmlStr = htmlStr.replace(/\<td\>(.*?\<\/td\>(\<td\>.*?\<\/td\>)?)/gi, '<td style="background:rgba(0,0,0,.2);">$1');
僅此兩句，在不額外撰寫 css 的情況下频伤，實(shí)現(xiàn)了明暗交替的效果恳谎。
