从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()方法的中文翻译。
对于一个初级程序员的日常开发来说，很多时候遇到的‘意外’，都是相关内容知道的不全面，这时候参考文档一般都是可以发现问题。