从RegExp.prototype.test()开始说正则的lastIndex属性

故事的开始是这样的:

须要作的就是为这个列表加上搜索功能。为了更简单的说明问题，这个问题最后就至关于对原始
name数组进行一次匹配过滤，因而想固然的有了相似下面的代码：

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' ]

这里假设咱们的搜索字符串为‘李’，预期过滤事后的新数组newArr应该为['李同窗1','李同窗2','李同窗3'],可打印出来的结果只有2个，跳过了数组中的第二个元素。这里隐藏了什么问题？为了说清楚这个问题，要从正则表达式自己的一个属性lastIndex提及。

regexp.lastIndex

mdn的文档说的很清楚，lastIndex是正则表达式一个可读可写的整形属性，表示下次正则匹配的起始索引。只有在正则自己使用全局匹配 ‘g’ 时，该属性才会被设置而且起做用。且该属性的设置遵循下面的规则:

• 若是 lastIndex 大于字符串的长度，则 regexp.test 和 regexp.exec 将会匹配失败，而后 lastIndex 被设置为 0。

• 若是 lastIndex 等于字符串的长度，且该正则表达式匹配空字符串，则该正则表达式匹配从 lastIndex 开始的字符串。

• 若是 lastIndex 等于字符串的长度，且该正则表达式不匹配空字符串 ，则该正则表达式不匹配字符串，lastIndex 被重置为 0.。

• 不然，lastIndex 被设置为紧随最近一次成功匹配的下一个位置。

规则看的很晕，其实本身试一下就知道了。回顾上面的问题，咱们打印一下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)

//执行的结果为 0 4 0 4  [ '李同窗1', '李同窗3' ]

由上面打印的结果，问题出在哪了已经很明显了，对于数组中第二个元素的匹配，是从索引为4开始(索引的结果还与 .* 默认的贪婪模式匹配有关，这里不作赘述)，这里固然不匹配，符合上述第三个规则，知道了这一点，咱们就能够很灵活的改正这个问题：

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)
})

最后一个细节，在非全局匹配模式下，lastIndex属性是不起做用的，即便设置这个属性值，匹配也会从起始位置开始。

结语

其实解决这个问题，最开始的时候并无直击问题的核心，只知道test()方法是返回一个布尔值，对lastIndex属性也没有太多了解，也就无法意识到这一层，但我仍是去mdn看了一下test()的文档，默认看的中文版，很不幸中文版的翻译里恰好少了正则全局标志下使用test()这一节，因而更坚决此方法不就是返回个布尔值的论断。结果多绕了几弯，一怒之下就跑去补充了mdn关于test()方法的中文翻译。对于一个初级程序员的平常开发来讲，不少时候遇到的‘意外’，都是相关内容知道的不全面，这时候参考文档通常都是能够发现问题。