js正則test匹配的踩坑及解決
引言
本瓜相信你一定經(jīng)常用以下這種最最簡單的正則來判斷字符串中是否存在某個子字符(別說了,我就是)??
const pattern = /ab/g pattern.test("abcd") // true
這樣去匹配,有什么問題嗎?
不急,現(xiàn)在來讓你猜一下,以下代碼的輸出?
const pattern = /ab/g console.log(pattern.test("abcd")) console.log(pattern.test("abcd")) console.log(pattern.test("abcd"))
“不就是三個 true 嗎?!”
在控制臺上打印試試?驚不驚喜、意不意外?
為什么是 true 、false 、true ?
原來這里,這里有個小坑需要注意下,用 test() 連續(xù)做匹配的時候,會出錯,是因為一個我們將要認(rèn)識的 —— 正則類型 lastIndex 屬性!
lastIndex 屬性用于規(guī)定下次匹配的起始位置。
每次當(dāng)我們用正則 RegExp.exec() 和 RegExp.test() 進行匹配的時候,如果返回為 true,lastIndex 屬性的值會發(fā)生變化,會變成正確匹配的子字符串的最后位置,并將此位置作為下次檢索的起始點。如果返回為 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
當(dāng)我們第一次調(diào)用 pattern.test("abcd")
,pattern.lastIndex
為 2, 即字母 b 的位置,當(dāng)再次調(diào)用 pattern.test("abcd")
則會從 b 的位置往后搜索,搜不到 ab 了,返回 false ,同時 lastIndex 重置為 0 ,然后第三次調(diào)用 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 是匹配的更優(yōu)解,不用手動清理,存在則悉數(shù)返回成數(shù)組,不存在,返回 null
以上就是正則test匹配的踩坑及解決的詳細(xì)內(nèi)容,更多關(guān)于正則test匹配坑的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
用js判斷頁面刷新或關(guān)閉的方法(onbeforeunload與onunload事件)
Onunload,onbeforeunload都是在刷新或關(guān)閉時調(diào)用,可以在<script>腳本中通過window.onunload來指定或者在<body>里指定2012-06-06layer ui插件顯示tips時,修改字體顏色的實現(xiàn)方法
今天小編就為大家分享一篇layer ui插件顯示tips時,修改字體顏色的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09整理Javascript數(shù)組學(xué)習(xí)筆記
整理Javascript數(shù)組學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript,本文就是進一步學(xué)習(xí)javascript數(shù)組,希望大家繼續(xù)關(guān)注2015-11-11JavaScript編寫Chrome擴展實現(xiàn)與瀏覽器的交互及時間通知
得益于API,我們可以用JavaScript編寫Chrome擴展實現(xiàn)與瀏覽器的交互及時間通知。值得一提的是現(xiàn)在Chrome擁有后臺進程可以使通知在前臺瀏覽器關(guān)閉的情況下依然能夠生效.2016-05-05JavaScript中的null和undefined區(qū)別介紹
這篇文章主要介紹了JavaScript中的null和undefined區(qū)別介紹,JavaScript中存在2個代表信息不存在的特殊值:null和undefined,本文主要講解它們的區(qū)別,需要的朋友可以參考下2015-01-01layer頁面跳轉(zhuǎn),獲取html子節(jié)點元素的值方法
今天小編就為大家分享一篇layer頁面跳轉(zhuǎn),獲取html子節(jié)點元素的值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09