js正则test匹配的踩坑及解决
更新时间：2022年07月08日 09:48:21 作者：掘金安东尼
这篇文章主要为大家介绍了正则test匹配的踩坑示例讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
本瓜相信你一定经常用以下这种最最简单的正则来判断字符串中是否存在某个子字符（别说了，我就是）🐶
const pattern = /ab/g
pattern.test("abcd") // true
这样去匹配，有什么问题吗？
不急，现在来让你猜一下，以下代码的输出？
const pattern = /ab/g
console.log(pattern.test("abcd"))
console.log(pattern.test("abcd"))
console.log(pattern.test("abcd"))
“不就是三个 true 吗？！”
在控制台上打印试试？惊不惊喜、意不意外？
为什么是 true 、false 、true ?
原来这里，这里有个小坑需要注意下，用 test() 连续做匹配的时候，会出错，是因为一个我们将要认识的 —— 正则类型 lastIndex 属性！
lastIndex 属性用于规定下次匹配的起始位置。
每次当我们用正则 RegExp.exec() 和 RegExp.test() 进行匹配的时候，如果返回为 true，lastIndex 属性的值会发生变化，会变成正确匹配的子字符串的最后位置，并将此位置作为下次检索的起始点。如果返回为 false，lastIndex 重置为 0 ；
所以，我们这样打印试试就知道了：
const pattern = /ab/g
console.log(pattern.test("abcd")) // true
console.log(pattern.lastIndex) // 2
console.log(pattern.test("abcd")) // false
console.log(pattern.lastIndex) // 0
console.log(pattern.test("abcd")) // true
console.log(pattern.lastIndex) // 2
当我们第一次调用 pattern.test("abcd") ，pattern.lastIndex 为 2， 即字母 b 的位置，当再次调用 pattern.test("abcd") 则会从 b 的位置往后搜索，搜不到 ab 了，返回 false ，同时 lastIndex 重置为 0 ，然后第三次调用 pattern.test("abcd") 又能正确返回 true 了，lastIndex 也变成了 2。
不知道这个坑，你踩到过没？
怎么解决呢？
方法一：手动清理 lastIndex
const pattern = /ab/g
console.log(pattern.test("abcd")) // true
pattern.lastIndex = 0
console.log(pattern.test("abcd")) // true
不过，这样手动清理很麻烦，显得很笨，所以建议用方法二。
方法二：用 match 来匹配
const pattern = /ab/g
console.log("abcd".match(pattern)) // ['ab']
console.log("abcdab".match(pattern)) // ['ab', 'ab']
console.log("123".match(pattern)) // null
match 是匹配的更优解，不用手动清理，存在则悉数返回成数组，不存在，返回 null
以上就是正则test匹配的踩坑及解决的详细内容，更多关于正则test匹配坑的资料请关注脚本之家其它相关文章！
相关文章
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单，对bootstrap 表单相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要为大家详细介绍了js实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了Jquery对数组的操作技巧,需要的朋友可以参考下2014-03-03
javascript refresh page，页面刷新实现代码。2009-07-07
这篇文章主要介绍了JS/CSS实现字符串单词首字母大写功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
非常酷的javascript拖动分页功能，无缝循环分页，拖动鼠标即可完成分页，鼠标向左拖动回到前一页，向右拖动则翻开第二页，还带有动画特效，着实很不错，界面黑色，非主流风格，相信很多人会喜欢的。2015-05-05
这篇文章主要介绍了微信小程序实现获取准确的腾讯定位地址功能,结合实例形式详细分析了微信小程序使用腾讯地理位置接口的相关注册、操作步骤及接口使用技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了JavaScript日期类型的一些用法介绍,本文讲解了获取某个月份的天数、获取时区、计算运行时间、删除cookie等用法,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript中的函数式编程详解,需要的朋友可以参考下2020-08-08
这篇文章主要为大家详细介绍了如何实现有趣的bootstrap走动进度条,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论