js正则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匹配坑的资料请关注脚本之家其它相关文章！