js 如何正則匹配沒(méi)有內(nèi)容的空標(biāo)簽并移除掉?

例如

<span></span>

<p></p>

等等

正則

/<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/ig

html='<div id="fixedTools" class="hidden-xs hidden-sm">'+
'\n  <a id="backtop" class="hidden border-bottom" href="#" rel="external nofollow" ></a>'+
'\n'+
'\n  <div class="qrcodeWraper">'+
'\n    <a href="/app#qrcode" rel="external nofollow" ><span class="glyphicon glyphicon-qrcode"></span></a>'+
'\n    <img id="qrcode" class="border" alt="sf-wechat" src="https://sf-static.b0.upaiyun.com/v-581fe7b0/page/img/app/appQrcode.png">'+
'\n'+
'\n    <p class="qrcode-text"></p>'+
'\n  </div>'+
'\n</div>'

ptn=/<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/ig
s = html.replace(ptn,'')
console.log(s)

通過(guò)在線測(cè)試工具

如果考慮將沒(méi)有style的span去掉

有span的就留下來(lái)

因?yàn)槟J(rèn)編輯器中，span沒(méi)有樣式的沒(méi)有必要

str=str.replace(/<span\s*?(?!:style)>(.[^<>]*)<\/span>/ig,"$1");

先看下面的位置

零寬斷言
接下來(lái)的四個(gè)用于查找在某些內(nèi)容(但并不包括這些內(nèi)容)之前或之后的東西，也就是說(shuō)它們像\b,^,$那樣用于指定一個(gè)位置，這個(gè)位置應(yīng)該滿足一定的條件(即斷言)，因此它們也被稱為零寬斷言。最好還是拿例子來(lái)說(shuō)明吧：

斷言用來(lái)聲明一個(gè)應(yīng)該為真的事實(shí)。正則表達(dá)式中只有當(dāng)斷言為真時(shí)才會(huì)繼續(xù)進(jìn)行匹配。

(?=exp)也叫零寬度正預(yù)測(cè)先行斷言，它斷言自身出現(xiàn)的位置的后面能匹配表達(dá)式exp。比如\b\w+(?=ing\b)，匹配以ing結(jié)尾的單詞的前面部分(除了ing以外的部分)，如查找I'm singing while you're dancing.時(shí)，它會(huì)匹配sing和danc。

(?<=exp)也叫零寬度正回顧后發(fā)斷言，它斷言自身出現(xiàn)的位置的前面能匹配表達(dá)式exp。比如(?<=\bre)\w+\b會(huì)匹配以re開頭的單詞的后半部分(除了re以外的部分)，例如在查找reading a book時(shí)，它匹配ading。

假如你想要給一個(gè)很長(zhǎng)的數(shù)字中每三位間加一個(gè)逗號(hào)(當(dāng)然是從右邊加起了)，你可以這樣查找需要在前面和里面添加逗號(hào)的部分：((?<=\d)\d{3})+\b，用它對(duì)1234567890進(jìn)行查找時(shí)結(jié)果是234567890。

下面這個(gè)例子同時(shí)使用了這兩種斷言：(?<=\s)\d+(?=\s)匹配以空白符間隔的數(shù)字(再次強(qiáng)調(diào)，不包括這些空白符)。

負(fù)向零寬斷言
前面我們提到過(guò)怎么查找不是某個(gè)字符或不在某個(gè)字符類里的字符的方法(反義)。但是如果我們只是想要確保某個(gè)字符沒(méi)有出現(xiàn)，但并不想去匹配它時(shí)怎么辦？例如，如果我們想查找這樣的單詞--它里面出現(xiàn)了字母q,但是q后面跟的不是字母u,我們可以嘗試這樣：

\b\w*q[^u]\w*\b匹配包含后面不是字母u的字母q的單詞。但是如果多做測(cè)試(或者你思維足夠敏銳，直接就觀察出來(lái)了)，你會(huì)發(fā)現(xiàn)，如果q出現(xiàn)在單詞的結(jié)尾的話，像Iraq,Benq，這個(gè)表達(dá)式就會(huì)出錯(cuò)。這是因?yàn)閇^u]總要匹配一個(gè)字符，所以如果q是單詞的最后一個(gè)字符的話，后面的[^u]將會(huì)匹配q后面的單詞分隔符(可能是空格，或者是句號(hào)或其它的什么)，后面的\w*\b將會(huì)匹配下一個(gè)單詞，于是\b\w*q[^u]\w*\b就能匹配整個(gè)Iraq fighting。負(fù)向零寬斷言能解決這樣的問(wèn)題，因?yàn)樗黄ヅ湟粋€(gè)位置，并不消費(fèi)任何字符?，F(xiàn)在，我們可以這樣來(lái)解決這個(gè)問(wèn)題：\b\w*q(?!u)\w*\b。

零寬度負(fù)預(yù)測(cè)先行斷言(?!exp)，斷言此位置的后面不能匹配表達(dá)式exp。例如：\d{3}(?!\d)匹配三位數(shù)字，而且這三位數(shù)字的后面不能是數(shù)字；\b((?!abc)\w)+\b匹配不包含連續(xù)字符串a(chǎn)bc的單詞。

同理，我們可以用(?<!exp),零寬度負(fù)回顧后發(fā)斷言來(lái)斷言此位置的前面不能匹配表達(dá)式exp：(?<![a-z])\d{7}匹配前面不是小寫字母的七位數(shù)字。

一個(gè)更復(fù)雜的例子：(?<=<(\w+)>).*(?=<\/\1>)匹配不包含屬性的簡(jiǎn)單HTML標(biāo)簽內(nèi)里的內(nèi)容。(?<=<(\w+)>)指定了這樣的前綴：被尖括號(hào)括起來(lái)的單詞(比如可能是<b>)，然后是.*(任意的字符串),最后是一個(gè)后綴(?=<\/\1>)。注意后綴里的\/，它用到了前面提過(guò)的字符轉(zhuǎn)義；\1則是一個(gè)反向引用，引用的正是捕獲的第一組，前面的(\w+)匹配的內(nèi)容，這樣如果前綴實(shí)際上是<b>的話，后綴就是</b>了。整個(gè)表達(dá)式匹配的是<b>和</b>之間的內(nèi)容(再次提醒，不包括前綴和后綴本身)。

這個(gè)解讀

1、<span后面的/s*? 主要是考慮<span     >與<span>都考慮在內(nèi)

\s匹配空字符*表示多個(gè)空字符都可以，?是表示前面的可有可無(wú)。

2、(?!:style) 表示右側(cè)不能有style的才可以匹配，因?yàn)橛械目隙ㄓ杏?。而且不獲取，所以這個(gè)括號(hào)不是$1

3、(.[^<>]*) 就是匹配<span></span>中間的數(shù)據(jù)了。

這兩天剛開始研究這個(gè)，寫了好幾個(gè)正則，先分享出來(lái)，看大家能看懂嗎

//加強(qiáng)替換主要是考慮多個(gè)br的問(wèn)題
function doRepAdvance(s){
var str=s.replace(/<p><br type="_moz">\s*?<\/p>/ig,"");
str=str.replace(/<p>\s*<br type="_moz">\s*<\/p>/ig, "");
str=str.replace(/<p>\s*?<br\s?\/?>\s*?<\/p>/ig, "");
str=str.replace(/<p>(\s|\&nbsp\;| |　|\xc2\xa0)*<\/p>/ig, "");
str=str.replace(/<p>\s*?<\/p>/ig,"");
str=str.replace(/<p>&nbsp;<\/p>/ig,"");
str=str.replace(/<br type="_moz">\n&nbsp;<\/p>/ig, "</p>");
str=str.replace(/<br type="_moz">\s*?<\/p>/ig, "</p>");
str=str.replace(/<br\s?\/?>\s*?<\/p>/ig, "</p>");
str=str.replace(/<br \/>\n&nbsp;<\/p>/ig, "</p>");
str=str.replace(/<br>\n&nbsp;<\/p>/ig, "</p>");
//多個(gè)br
str=str.replace(/(<br type="_moz">\s*)+<\/p>/ig, "</p>");
str=str.replace(/(<br\s?\/?>\s*)+<\/p>/ig, "</p>");
//空標(biāo)簽
str=str.replace(/<p style=["'].[^<>]*["']>/ig, "<p>");
str=str.replace(/<span style="background-color: initial;">/ig, "<span>");
//沒(méi)有style的span去掉
str=str.replace(/<span\s*?(?!:style)>(.[^<>]*)<\/span>/ig,"$1");
str=str.replace(/<([a-z]+?)(?:\s+?[^>]*)?>(\s|&nbsp;)*?<\/\1>/ig, "");
//str=str.replace(/<([a-z]+?)(?:\s+?[^>]*)?>\s*?<\/\1>/ig, "");

return str;
}

上面都是一些好東西，具體的自己研究吧。

最新評(píng)論