那些年我们一起走过的正则表达式的坑

一、为什么需要学习正则表达式

正则表达式是一种应用广,灵活度高的一种查找方式,目前在爬虫爬取,对特定的内容的抓包,登录的验证等多个方面都用得上正则表达式,但是由于其实一种灵活的 查找,所以我们要付出的代价就是相应使用的复杂,复杂度表现在语法上的不便记忆和应用层面上的易出错,今天我们就来谈谈正则表达式在应用层面上常出现的错 误

二、正则表达式常见坑与注意点

1、零宽断言理解错误

零宽断言匹配的相当于是一个位置,不是一个具体的内容

示例:

将字符串str="test.com"的.前面的替换为1,也就是str="1.com"

错误示范:

    var str="test.com"; console.log(str); var reg=/(?=\.)*/gi; //var re=new RegExp(reg); str=str.replace(reg,"1"); console.log(str);

运行结果是:str="1t1e1s1t1.1c1o1m",我想此时你的心情一定是这样的

那些年我们一起走过的正则表达式的坑_第1张图片

 从这个运行结果来看,就是在原来的字符串中的每个字符前面插入1,但是这个并不是我们所要求的,造成这样的原因主要是位置弄错了,现在把代码改为如下所示:

 

var str="test.com"; console.log(str); var reg=/\w+(?=\.)/gi; //var re=new RegExp(reg); str=str.replace(reg,"1"); console.log(str);

 

这样运行一下就得到了我们所要求的,这个位置我们其实是要求:零宽断言+匹配类型+元字符+零宽断言,错误示范中是零宽断言+元字符这样的一种组合,根本不符合语法的要求,所以错误。但是里面除了匹配类型是一定要存在的,其余的都可以按要求省去,也就是说不是必须的

 2、后向调用理解错误

示例

匹配字符串str="455 33"

错误示范

var str="455 33"; var test=/\b([1-4]\d{1,2})\s?\1\b/gi; console.log(test.test(str));

这个错误主要的原因是对后向调用的理解有误,后向调用第n次使用时匹配第一次的完全相同的内容,但是不意味着在这里第二次引用前面分组的正则表达式,所以这里只匹配“455 455”这样的字符串

 

对了这里里面的/g指的是全局匹配也就是在传入中的全部内容进行搜索,如果不设置的话那么就返回第一个匹配的内容,/i也就是忽略大小写的意思,除了这两个外还有/m,表示多行匹配,什么是多行匹配呢?就是匹配换行符两端的潜在匹配。影响正则中的^$符号

 3、全局变量的导向错误

这个错误不知道怎么说,但就是挺奇葩的,知道的人麻烦再下面留言一下

示例:

将.号前面的内容替换为"t",字符串为"dd1.432"

错误示范:

var str="dd1.432"; var reg=/\w*?(?=\.)/gi; str=str.replace(reg,"t"); console.log(str);

 

 这个时候原本你会以为正确运行但是,出现的效果确实“tt.432”,顿时你的内心一定是跟博主一样有千万只草泥马在奔腾

那些年我们一起走过的正则表达式的坑_第2张图片

但是最后的调试结果确实把最后面的g去掉,或者是修改为下面这样

var str="dd1.432"; var reg=/^\w*?(?=\.)/gi; str=str.replace(reg,"t"); console.log(str);

 

4、对^ $理解上的错误

示例:

将上题修改为如下所示

错误示范:

var str="asdf dd1.432"; var reg=/^\w*?(?=\.)/gi; str=str.replace(reg,"t"); console.log(str);

 

^匹配的是传入的字符串str的最开始的部分,$匹配的是str字符串最后的部分,如果是中间就不能使用这两个限定,还好这个坑,博主不曾踩过

5、获取某个DOM节点下面的内容

示例:

获取标签<ul>下面的内容,具体是str="<ul>  leslie</ul><ul>  谢灿勇</ul>"

 JavaScript代码

 

var str="<ul>  leslie</ul><ul>  谢灿勇</ul>";
var reg=/(?<=<ul>)[\s\S]*?(?=</ul>)/g;
str=str.replace(reg,"t");
console.log(str);

 

运行的结果是:

这里面为什么会出现这样的情况,相信此时你的内心也是奔溃的,犹如千万只草泥马呼啸而过

那些年我们一起走过的正则表达式的坑_第3张图片

经过了大量的试验验证,发现竟然是由于JavaScript中的正则表达式支持的相对比较少,所以也就没有支持零宽度正回顾后发断言[(?<=<ul>)],而且里面还存在另外的一个错误就是“/”是需要进行转义操作的,但是这个时候我们发现要获取<ul>位置后面的内容好像没有方法可以实现了,经过了思考,我选择了多次匹配来实现

6、多次匹配

接上面的问题继续说下,我们所说的多次匹配其实就是第一次就只实现一部分,第二层次再实现一部分,这样一直下去,直到完成。

我们第一次就只实现将</ul>去掉,然后将<ul>去掉,这样就得到我们所要求的

 

var str="<ul>    leslie </ul><ul>  xiecanyong</ul>";
var reg=/<ul>[\s\S]*?(?=<\/ul>)/gi;
str=str.match(reg);
var reg1=/<ul>/i;
for(var i=0,max=str.length;i<max;i++){
    str=str.replace(reg1," ");
console.log(str);

}

 

第一次实现的代码是这样的,但是一运行却发现只打印出leslie,这里主要的原因是,第一次就将leslie存入str变量中,然后第二次调用时,str=“leslie”,所以根本获取不到<ul>,所以根本就是为空,所以也就只匹配到leslie,将代码修改为如下就可以正常运行了

 

var str="<ul>    leslie </ul><ul>  xiecanyong</ul>";
var reg=/<ul>[\s\S]*?(?=<\/ul>)/gi;
str=str.match(reg);
var reg1=/<ul>/i;
for(var i=0,max=str.length;i<max;i++){
    str[i]=str[i].replace(reg1," ");
console.log(str[i]);
}

 

 打印一下结果:

 好的问题完成了,哈哈,内心如释重负

那些年我们一起走过的正则表达式的坑_第4张图片

7、多次匹配实现思路

其实在上面的内容中已经实现了两种常见的多次匹配的思想,一种是获取我们所要求的[str=str.match(reg)],另一种是将我们要除去的东西替换为空[ str[i]=str[i].replace(reg1," ")]所示

 三、总结

 通过这篇文章主要是希望大家能够学习到一些在JavaScript中你可能会遇到的一些坑,以及一些问题的实现思路,如果在这里有什么地方说错的,欢迎大家帮忙指正,在此不胜感激,如果你觉得这篇文章对你有帮助的话请为我点一个赞,你的点赞是我前进的动力。后续如果是大家有什么问题的话,也欢迎大家留言共同探讨

你可能感兴趣的:(那些年我们一起走过的正则表达式的坑)