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

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

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

故事的開始是這樣的:

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

var  ori=["李同學1","李同學2","李同學3","劉同學"]
var searchText="李"

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

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

regexp.lastIndex

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

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

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

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

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

規(guī)則看的很暈，其實自己試一下就知道了?；仡櫳厦娴膯栴}，我們打印一下lastIndex屬性：

var  ori=["李同學1","李同學2","李同學3","劉同學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  [ "李同學1", "李同學3" ]

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

var  ori=["李同學1","李同學2","李同學3","劉同學1"]
var searchText="李"

//最直接的就是取消正則的全局匹配標志
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)
})

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

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

結(jié)語

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

GPU云服務器云服務器解析域名從哪里開始云計算從零開始大數(shù)據(jù)從零開始學java從什么開始

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/89813.html

Regexp對象

摘要：等價于實例屬性正則對象的實例屬性分成兩類。返回一個布爾值，表示是否設置了修飾符。字符串對象的方法，返回第一個滿足條件的匹配結(jié)果在整個字符串中的位置。字符串對象的方法按照正則規(guī)則分割字符串，返回一個由分割后的各個部分組成的數(shù)組。概述實例屬性實例方法RegExp.prototype.test()g RegExp.prototype.exec()g括號indexx input屬性字符串的實...

NervosNetwork 2019-08-26 10:19 評論0 收藏0
JavaScript學習之正則表達式

摘要：正則表達式如何創(chuàng)建正則表達式字面量創(chuàng)建通過構(gòu)造函數(shù)正則表達式實例屬性及方法三個修飾符屬性，只讀不可修改正則表達式是否添加了忽略大小寫的修飾符，返回一個布爾值正則表達式是否添加了全局匹配的修飾符，返回一個布爾值正則表達式是否添加了換行的修飾符正則表達式如何創(chuàng)建正則表達式字面量創(chuàng)建var r = /a/; 通過構(gòu)造函數(shù)var r = new RegExp(a); 正則表達式實...

idealcn 2019-08-23 12:19 評論0 收藏0
正則表達式-基礎知識Review

摘要：正則表達式基礎知識正則表達式是計算機科學的一個概念。正則表達式使用單個字符竄來描述匹配一系列符合某個句法規(guī)則的字符竄。正則表達式的文本字符竄。第二個參數(shù)是正則表達式分組內(nèi)容，沒有分組則沒有該參數(shù)。正則表達式-基礎知識Review 正則表達式（Regular Expression)是計算機科學的一個概念。正則表達式使用單個字符竄來描述、匹配一系列符合某個句法規(guī)則的字符竄。在很多文本...

Ajian 2019-08-23 12:14 評論0 收藏0
JavaScript中的正則表達式

摘要：是否有標志對返回值有很大影響。參數(shù)限制返回值中分割元素數(shù)量方法返回一個由替換值替換一些或所有匹配的模式后的新字符串。文章同步到github 正則在平時工作中用的非常多, 最開始接觸正則的時候感覺這個東東好難記啊,最近把正則的內(nèi)容整理了一下,寫成以下文章。先給大家介紹一個在線解析正則的網(wǎng)站,來幫助我們理解正則,特別是復雜的正則表達式,非常好用 http://www.regexper....

isLishude 2019-08-21 17:04 評論0 收藏0
簡單學習 JavaScript 正則表達式

摘要：對于對象，方法返回一個該正則表達式的字面量。顯示顯示正則表達式在的應用一個在字符串中執(zhí)行查找匹配的方法，它返回一個數(shù)組或者在未匹配到時返回。為什么要用正則表達式簡單的說：我們與字符串接觸的頻率非常之高，正則表達式可以極大的提高復雜文本分析的效率，快速匹配出復雜的字符串。創(chuàng)建一個正則表達式直接量語法（字面量） var expression = /pattern/flags ;...

nevermind 2019-08-20 12:03 評論0 收藏0