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

seanlook 发布于2019-08-21 17:39 / 2179人阅读

摘要：的文档说的很清楚，是正则表达式一个可读可写的整形属性，表示下次正则匹配的起始索引。只有在正则本身使用全局匹配时，该属性才会被设置并且起作用。如果等于字符串的长度，且该正则表达式匹配空字符串，则该正则表达式匹配从开始的字符串。

故事的开始是这样的:

需要做的就是为这个列表加上搜索功能。为了更简单的说明问题，这个问题最后就相当于对原始
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()方法的中文翻译。
对于一个初级程序员的日常开发来说，很多时候遇到的‘意外’，都是相关内容知道的不全面，这时候参考文档一般都是可以发现问题。

GPU云服务器云服务器解析域名从哪里开始云计算从零开始大数据从零开始学java从什么开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89813.html

Regexp对象

摘要：等价于实例属性正则对象的实例属性分成两类。返回一个布尔值，表示是否设置了修饰符。字符串对象的方法，返回第一个满足条件的匹配结果在整个字符串中的位置。字符串对象的方法按照正则规则分割字符串，返回一个由分割后的各个部分组成的数组。概述实例属性实例方法RegExp.prototype.test()g RegExp.prototype.exec()g括号indexx input属性字符串的实...

NervosNetwork 2019-08-26 10:19 评论0 收藏0
JavaScript学习之正则表达式

摘要：正则表达式如何创建正则表达式字面量创建通过构造函数正则表达式实例属性及方法三个修饰符属性，只读不可修改正则表达式是否添加了忽略大小写的修饰符，返回一个布尔值正则表达式是否添加了全局匹配的修饰符，返回一个布尔值正则表达式是否添加了换行的修饰符正则表达式如何创建正则表达式字面量创建var r = /a/; 通过构造函数var r = new RegExp(a); 正则表达式实...

idealcn 2019-08-23 12:19 评论0 收藏0
正则表达式-基础知识Review

摘要：正则表达式基础知识正则表达式是计算机科学的一个概念。正则表达式使用单个字符窜来描述匹配一系列符合某个句法规则的字符窜。正则表达式的文本字符窜。第二个参数是正则表达式分组内容，没有分组则没有该参数。正则表达式-基础知识Review 正则表达式（Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符窜来描述、匹配一系列符合某个句法规则的字符窜。在很多文本...

Ajian 2019-08-23 12:14 评论0 收藏0
JavaScript中的正则表达式

摘要：是否有标志对返回值有很大影响。参数限制返回值中分割元素数量方法返回一个由替换值替换一些或所有匹配的模式后的新字符串。文章同步到github 正则在平时工作中用的非常多, 最开始接触正则的时候感觉这个东东好难记啊,最近把正则的内容整理了一下,写成以下文章。先给大家介绍一个在线解析正则的网站,来帮助我们理解正则,特别是复杂的正则表达式,非常好用 http://www.regexper....

isLishude 2019-08-21 17:04 评论0 收藏0
简单学习 JavaScript 正则表达式

摘要：对于对象，方法返回一个该正则表达式的字面量。显示显示正则表达式在的应用一个在字符串中执行查找匹配的方法，它返回一个数组或者在未匹配到时返回。为什么要用正则表达式简单的说：我们与字符串接触的频率非常之高，正则表达式可以极大的提高复杂文本分析的效率，快速匹配出复杂的字符串。创建一个正则表达式直接量语法（字面量） var expression = /pattern/flags ;...

nevermind 2019-08-20 12:03 评论0 收藏0