js正则表达式-前瞻

js正则表达式-前瞻

JS 正则表达式是 JS 学习过程中的一大难点，繁杂的匹配模式足以让人头大，不过其复杂性和其学习难度也赋予了它强大的功能。文章从 JS 正则表达式的正向前瞻说起，实现否定匹配的案例。本文适合有一定 JS 正则表达式基础的同学，如果对正则表达式并不了解，还需先学习基础再来观摩这门否定大法。

一、标签过滤需求

不知道大家在写JS有没有遇到过这样的情况，当你要处理一串字符串时，需要写一个正则表达式来匹配当中不是 XXX 的文本内容。听起来好像略有些奇怪，匹配不是 XXX 的内容，不是 XXX 我匹配它干嘛啊，我要啥匹配啥不就完了。你还别说，这个玩意还真的有用，不管你遇没遇到过，反正我是遇到了。具体的需求例如：当你收到一串HTML代码，需要对这一串HTML代码过滤，将里面所有的非<p>标签都改为<p>。这里肯定有不少同学就要嫌弃了，将所有标签都改为<p>，那就把任意标签都改为<p>不就完了？”，于是乎一行代码拍脑袋而生：

    var str = '<div>,<p>,<h1>,<span>,</span>,</h1>,</p>,</div>';
    var reg = /<(\/?).*?>/g;
    var newStr = str.replace(reg, "<$1p>");
    console.log(newStr);//<p>,<p>,<p>,<p>,</p>,</p>,</p>,</p>

注意这个方法中有一个引用符 $1 ，这个的意思引用正则的表达式的第1个分组，可以用$N来表示在正则表达式中的第N个捕获的引用。就那上面的例子来说，(\/?)这个一个表达式的含义是，\/这个字符出现0次或者1次，而$1这个引用呢就相当于和\/这个字符门当户对的大闺女，她已下定决心此生非\/不嫁。所以当匹配到有一个\/的时候，$1这个引用就把它捕获下来，从现在起，你的就是我的，我的就是你的啦，因此$1等价于(\/?)所匹配到的字符；反之如果没有匹配到\/这个字符，那$1这个引用就得空守闺房，独立熬过一个又一个漫长的夜晚，因为它内心极度的空虚，所以$1就等价于”“（也就是空串）。

这里先聊了聊引用和捕获的概念，因为后面还会用到它。那么话说回来，刚才那一串正则，不是已经完美的