引言：JS 正則表達(dá)式是 JS 學(xué)習(xí)過程中的一大難點(diǎn)，繁雜的匹配模式足以讓人頭大，不過其復(fù)雜性和其學(xué)習(xí)難度也賦予了它強(qiáng)大的功能。文章從 JS 正則表達(dá)式的正向前瞻說起，實(shí)現(xiàn)否定匹配的案例。本文適合有一定 JS 正則表達(dá)式基礎(chǔ)的同學(xué)，如果對(duì)正則表達(dá)式并不了解，還需先學(xué)習(xí)基礎(chǔ)再來觀摩這門否定大法。
一、標(biāo)簽過濾需求
不知道大家在寫JS有沒有遇到過這樣的情況，當(dāng)你要處理一串字符串時(shí)，需要寫一個(gè)正則表達(dá)式來匹配當(dāng)中不是 XXX 的文本內(nèi)容。聽起來好像略有些奇怪，匹配不是 XXX 的內(nèi)容，不是 XXX 我匹配它干嘛啊，我要啥匹配啥不就完了。你還別說，這個(gè)玩意還真的有用，不管你遇沒遇到過，反正我是遇到了。具體的需求例如：當(dāng)你收到一串HTML代碼，需要對(duì)這一串HTML代碼過濾，將里面所有的非<p>標(biāo)簽都改為<p>。這里肯定有不少同學(xué)就要嫌棄了，“將所有標(biāo)簽都改為<p>，那就把任意標(biāo)簽都改為<p>不就完了？”，于是乎一行代碼拍腦袋而生：
1 var str = '<div>,<p>,<h1>,<span>,</span>,</h1>,</p>,</div>';2 var reg = /<(\/?).*?>/g;3 var newStr = str.replace(reg, "<$1p>");4 console.log(newStr);//<p>,<p>,<p>,<p>,</p>,</p>,</p>,</p>
注意這個(gè)方法中有一個(gè)引用符 “$1” ，這個(gè)的意思引用正則的表達(dá)式的第1個(gè)分組，可以用$N來表示在正則表達(dá)式中的第N個(gè)捕獲的引用。就那上面的例子來說，"(\/?)"這個(gè)一個(gè)表達(dá)式的含義是，"\/"這個(gè)字符出現(xiàn)0次或者1次，而$1這個(gè)引用呢就相當(dāng)于和“\/”這個(gè)字符門當(dāng)戶對(duì)的大閨女，她已下定決心此生非"\/"不嫁。所以當(dāng)匹配到有一個(gè)“\/”的時(shí)候，$1這個(gè)引用就把它捕獲下來，從現(xiàn)在起，你的就是我的，我的就是你的啦，因此$1等價(jià)于"(\/?)"所匹配到的字符；反之如果沒有匹配到"\/"這個(gè)字符，那$1這個(gè)引用就得空守閨房，獨(dú)立熬過一個(gè)又一個(gè)漫長的夜晚，因?yàn)樗鼉?nèi)心極度的空虛，所以$1就等價(jià)于""（也就是空串）。
