正則表達(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ì)理想的我所不能容忍。
再下面是鄙人使用從該頁面扒下來的同樣的 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)了明暗交替的效果恳谎。