[ 正則表達(dá)式與web前端 ] 一劑偏方央勒,重構(gòu)你的文章

正則表達(dá)式是處理文本、數(shù)據(jù)的一劑良藥澳化,吃久了吃慣了才不覺得苦崔步,PO主久病多年苦無良醫(yī),所以搗鼓了一些針對web前端方面的偏方缎谷。

【 功能主治 】

適用于以下人群及癥狀:

  1. 內(nèi)容妹紙:從網(wǎng)上拷下來的文章樣式太亂井濒,拿人手短。列林。瑞你。
  2. 前端妹紙:某些內(nèi)容的排版太繁瑣,不想浪費(fèi)青春希痴。者甲。。
  3. 爬蟲漢子:扒到的文章內(nèi)容有點(diǎn)污砌创,不想手洗虏缸。鲫懒。。

【 禁忌人群 】

以下人群可能存在不良反應(yīng)刽辙,請慎用此方:

  1. 歲月靜好窥岩,不怕麻煩和浪費(fèi)青春的;
  2. 有更牛X解決方案的扫倡;
  3. 覺得我本人無聊的谦秧。。撵溃。

下面以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;">![新芽榜·2016年中國最具投資價(jià)值企業(yè)50強(qiáng)榜單](http://upload-images.jianshu.io/upload_images/590155-14755fa8a7bf8d94?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</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">![新芽榜·2016年中國最具投資價(jià)值企業(yè)50強(qiáng)榜單](http://upload-images.jianshu.io/upload_images/590155-14755fa8a7bf8d94?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</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 操作:

  1. 通過寫一個(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)一修飾。

  2. 再考慮 :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)了明暗交替的效果恳谎。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子因痛,更是在濱河造成了極大的恐慌婚苹,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸵膏,死亡現(xiàn)場離奇詭異膊升,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)谭企,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進(jìn)店門廓译,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人债查,你說我怎么就攤上這事非区。” “怎么了盹廷?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵征绸,是天一觀的道長。 經(jīng)常有香客問我俄占,道長管怠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任颠放,我火速辦了婚禮排惨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘碰凶。我一直安慰自己暮芭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布欲低。 她就那樣靜靜地躺著辕宏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪砾莱。 梳的紋絲不亂的頭發(fā)上瑞筐,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天,我揣著相機(jī)與錄音腊瑟,去河邊找鬼聚假。 笑死,一個(gè)胖子當(dāng)著我的面吹牛闰非,可吹牛的內(nèi)容都是我干的膘格。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼财松,長吁一口氣:“原來是場噩夢啊……” “哼瘪贱!你這毒婦竟也來了纱控?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤菜秦,失蹤者是張志新(化名)和其女友劉穎甜害,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體球昨,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡尔店,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了褪尝。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片闹获。...
    茶點(diǎn)故事閱讀 40,973評論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖河哑,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情龟虎,我是刑警寧澤齿拂,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布抹缕,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏垄懂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一苏章、第九天 我趴在偏房一處隱蔽的房頂上張望酿雪。 院中可真熱鬧,春花似錦贡耽、人聲如沸衷模。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阱冶。三九已至,卻和暖如春滥嘴,著一層夾襖步出監(jiān)牢的瞬間木蹬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工若皱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留镊叁,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓走触,卻偏偏與公主長得像晦譬,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子饺汹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過程中蛔添,你是如何考慮他的UI、安全性、高性能迎瞧、SEO夸溶、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,177評論 0 1
  • jQuery基礎(chǔ)(一)——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗(yàn) $(docume...
    croyance0601閱讀 1,087評論 0 8
  • 其實(shí)平時(shí)用得多的選擇器無非也就是那么幾個(gè),時(shí)間久了凶硅,許多不常用的選擇器就慢慢忘記了缝裁。為了不讓自己忘記這些選擇器,今...
    盛夏晚清風(fēng)閱讀 1,842評論 0 5
  • 本文轉(zhuǎn)載自:眾成翻譯譯者:為之漫筆鏈接:http://www.zcfy.cc/article/239原文:http...
    極樂君閱讀 7,380評論 1 62
  • 一足绅、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,398評論 0 44