一个关于JS正则匹配的踩坑记录

 更新时间:2021年04月13日 11:22:42   作者:我叫宋大宗  
这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近发现在JS里的正则匹配有一个坑,而且当时很莫名奇妙,一度让我怀疑出现了灵异事件。

下面是踩坑代码

   var str=["二七1","二七2","金水","二七3","二七4","二七5"]
        var reg=new RegExp("二七","g");
        for(var i=0;i<str.length;i++){
            if(reg.test(str[i])){
                console.log(str[i])
            }
        }

我用正则对str进行全局匹配,当满足的时候打印出来,于是乎我就得到了这个

莫名的少了两个,然后我对它进行单独的判断

      var str=["二七1","二七2","金水","二七3","二七4","二七5"]
        var reg=new RegExp("二七","g");
        for(var i=0;i<str.length;i++){
            if(reg.test(str[i])){
                console.log(str[i])
            }
            if(i==1){
                console.log(reg.test(str[i]))
            }
            if(i==4){
                console.log(reg.test(str[i]))
            }
        }

于是我得到了这个

又少了一个,但可以看到之前所缺失的两个是满足正则判断的,然后我在网上找到了下面这段话:

如果在正则匹配中成功匹配到字符串,lastIndex会被设置为第一次匹配到的字符串的位置,以作为字符串全局匹配下次检索的起点,如果后面字段还能匹配成功,那么lastIndex会被反复重新赋值,直到匹配失败,它会被重置为0;

但我去请教了一下我的老师,他告诉我的是匹配到后是将lastIndex+1返回过去,也就是当我第一次匹配到后,lastIndex是2,这个2是字符串里的下标,而不是数组的下标,所以在对str[1]进行判断时是从字符串下标为2的开始,而不是从0开始,所以第二次判断为false,这时匹配失败,lastIndex被置为0,所以第三次可以匹配成功。

所以在判断结果为true后将lastIndex置为0,这样数据就正常了。

数据就正常了。

总结

如果使用全局匹配,那么在每一次查到后将lastIndex置零,或者不使用全局匹配,直接匹配即可。

这里奉上网友的总结:

lastIndex从字面上来讲就是最后一个索引,实际上它的意思是正则表达式开始下一次查找的索引位置,第一次的时候总是为0的,第一次查找完了的时候会把lastIndex的值设为匹配到得字符串的最后一个字符的索引位置加1,第二次查找的时候会从lastIndex这个位置开始,后面的以此类推。如果没有找到,则会把lastIndex重置为0。要注意的是,lastIndex属性只有在有全局标志正则表达式中才有作用,如果我们把上面代码中正则表达式的g标志去掉,那么三次弹出的就都是true了。

需要的朋友可以参考下,到此这篇关于一个关于JS正则匹配的踩坑记录的文章就介绍到这了,更多相关JS正则匹配踩坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 学习JS中的DOM节点以及操作

    学习JS中的DOM节点以及操作

    本篇文章给大家整理了关于JS中DOM节点的相关知识点以及代码实例,有兴趣的朋友可以跟着学习下。
    2018-04-04
  • jquery获取radio值(单选组radio)

    jquery获取radio值(单选组radio)

    jquery获取radio值使用到特殊的选择器type=radio,为方便大家理解,另附一个jquery实例,想学习的朋友可以看看
    2014-10-10
  • echarts展示区域地图添加纹理图片操作指南

    echarts展示区域地图添加纹理图片操作指南

    这篇文章主要给大家介绍了关于echarts展示区域地图添加纹理图片操作的相关资料,ECharts地图组件支持使用图片作为地图区域的填充纹理,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 微信小程序实现商品属性联动选择

    微信小程序实现商品属性联动选择

    这篇文章主要为大家详细介绍了微信小程序实现商品属性联动选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • JavaScript+CSS实现唯美蝴蝶动画

    JavaScript+CSS实现唯美蝴蝶动画

    这篇文章主要介绍了JavaScript+CSS实现唯美蝴蝶动画,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • JavaScript中三种引入方式的使用详解

    JavaScript中三种引入方式的使用详解

    JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,本文主要为大家介绍了JavaScript中三种常见引入方式,希望对大家有所帮助
    2024-01-01
  • 如何用js实现判断是否是小数

    如何用js实现判断是否是小数

    这篇文章主要给大家介绍了关于如何用js实现判断是否是小数的相关资料,文中介绍了如何通过使用isNaN()函数和使用正则表达式来解决,具有一定参考借鉴价值,需要的朋友可以参考下
    2024-04-04
  • 在JavaScript中使用inline函数的问题

    在JavaScript中使用inline函数的问题

    在JavaScript中使用inline函数的问题...
    2007-03-03
  • 微信小程序之多列表的显示和隐藏功能【附源码】

    微信小程序之多列表的显示和隐藏功能【附源码】

    今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?下面小编给大家带来了微信小程序之多列表的显示和隐藏功能,感兴趣的朋友一起看看吧
    2018-08-08
  • 微信小程序分包加载的实现代码

    微信小程序分包加载的实现代码

    分包加载是一种小程序优化技术,将小程序不同功能的代码,分别打包成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载,在构建小程序分包项目时,构建会输出一个或多个分包,这篇文章主要介绍了微信小程序---分包加载,需要的朋友可以参考下
    2024-07-07

最新评论