從RegExp.prototype.test()開始說正則的lastIndex屬性

seanlook 發(fā)布于2019-08-21 17:39 / 2186人閱讀

摘要：的文檔說的很清楚，是正則表達(dá)式一個(gè)可讀可寫的整形屬性，表示下次正則匹配的起始索引。只有在正則本身使用全局匹配時(shí)，該屬性才會(huì)被設(shè)置并且起作用。如果等于字符串的長度，且該正則表達(dá)式匹配空字符串，則該正則表達(dá)式匹配從開始的字符串。

故事的開始是這樣的:

需要做的就是為這個(gè)列表加上搜索功能。為了更簡單的說明問題，這個(gè)問題最后就相當(dāng)于對(duì)原始
name數(shù)組進(jìn)行一次匹配過濾，于是想當(dāng)然的有了類似下面的代碼：

var  ori=["李同學(xué)1","李同學(xué)2","李同學(xué)3","劉同學(xué)"]
var searchText="李"

var reg = new RegExp(".*"+searchText+".*", "g")
var newArr = ori.filter(function(value) {
  return reg.test(value)
})
console.log(newArr)       //[ "李同學(xué)1", "李同學(xué)3" ]

這里假設(shè)我們的搜索字符串為‘李’，預(yù)期過濾過后的新數(shù)組newArr應(yīng)該為["李同學(xué)1","李同學(xué)2","李同學(xué)3"],可打印出來的結(jié)果只有2個(gè)，跳過了數(shù)組中的第二個(gè)元素。這里隱藏了什么問題？為了說清楚這個(gè)問題，要從正則表達(dá)式本身的一個(gè)屬性lastIndex說起。

regexp.lastIndex

mdn的文檔說的很清楚，lastIndex是正則表達(dá)式一個(gè)可讀可寫的整形屬性，表示下次正則匹配的起始索引。只有在正則本身使用全局匹配 ‘g’ 時(shí)，該屬性才會(huì)被設(shè)置并且起作用。且該屬性的設(shè)置遵循下面的規(guī)則:

如果 lastIndex 大于字符串的長度，則 regexp.test 和 regexp.exec 將會(huì)匹配失敗，然后 lastIndex 被設(shè)置為 0。

如果 lastIndex 等于字符串的長度，且該正則表達(dá)式匹配空字符串，則該正則表達(dá)式匹配從 lastIndex 開始的字符串。

如果 lastIndex 等于字符串的長度，且該正則表達(dá)式不匹配空字符串，則該正則表達(dá)式不匹配字符串，lastIndex 被重置為 0.。

否則，lastIndex 被設(shè)置為緊隨最近一次成功匹配的下一個(gè)位置。

規(guī)則看的很暈，其實(shí)自己試一下就知道了。回顧上面的問題，我們打印一下lastIndex屬性：

var  ori=["李同學(xué)1","李同學(xué)2","李同學(xué)3","劉同學(xué)1"]
var searchText="李"

var reg = new RegExp(".*"+searchText+".*","g")
var newArr = ori.filter(function(value) {
  console.log(reg.lastIndex)
  return reg.test(value)
})
console.log(newArr)

//執(zhí)行的結(jié)果為 0 4 0 4  [ "李同學(xué)1", "李同學(xué)3" ]

由上面打印的結(jié)果，問題出在哪了已經(jīng)很明顯了，對(duì)于數(shù)組中第二個(gè)元素的匹配，是從索引為4開始(索引的結(jié)果還與 .* 默認(rèn)的貪婪模式匹配有關(guān)，這里不做贅述)，這里當(dāng)然不匹配，符合上述第三個(gè)規(guī)則，知道了這一點(diǎn)，我們就可以很靈活的改正這個(gè)問題：

var  ori=["李同學(xué)1","李同學(xué)2","李同學(xué)3","劉同學(xué)1"]
var searchText="李"

//最直接的就是取消正則的全局匹配標(biāo)志
var reg = new RegExp(".*"+searchText+".*?")
var newArr = ori.filter(function(value) {
  return reg.test(value)
})

//把起始索引改回來
var reg = new RegExp(".*"+searchText+".*?","g")
var newArr = ori.filter(function(value) {
  reg.lastIndex=0
  return reg.test(value)
})

//還可以忽略所有名稱的第一位進(jìn)行匹配
var reg = new RegExp(".*"+searchText+".*?","g")
var newArr = ori.filter(function(value) {
  reg.lastIndex=1
  return reg.test(value)
})

最后一個(gè)細(xì)節(jié)，在非全局匹配模式下，lastIndex屬性是不起作用的，即使設(shè)置這個(gè)屬性值，匹配也會(huì)從起始位置開始。

結(jié)語

其實(shí)解決這個(gè)問題，最開始的時(shí)候并沒有直擊問題的核心，只知道test()方法是返回一個(gè)布爾值，對(duì)lastIndex屬性也沒有太多了解，也就沒法意識(shí)到這一層，但我還是去mdn看了一下test()的文檔，默認(rèn)看的中文版，很不幸中文版的翻譯里剛好少了正則全局標(biāo)志下使用test()這一節(jié)，于是更堅(jiān)定此方法不就是返回個(gè)布爾值的論斷。結(jié)果多繞了幾彎，一怒之下就跑去補(bǔ)充了mdn關(guān)于test()方法的中文翻譯。
對(duì)于一個(gè)初級(jí)程序員的日常開發(fā)來說，很多時(shí)候遇到的‘意外’，都是相關(guān)內(nèi)容知道的不全面，這時(shí)候參考文檔一般都是可以發(fā)現(xiàn)問題。