循环下的正则匹配?说说正则中的lastIndex

时间: 2018-09-12阅读: 1419标签: 正则

最近在使用正则匹配的时候,我遇到一个非常有意思的现象,代码如下所示:

const reg = /\.jpg/g;
const arr = [
    'test1.jpg',
    'test2.jpg',
    'test3.jpg',
    'test4.jpg',
    'test5.jpg',
];
arr.map(item => console.log(reg.test(item)));

这段代码很好理解:它的规则就是判断字符串中是否含有.jpg,然后再循环地和数组中的字符串进行匹配,打印出结果。

很显然这非常之简单嘛,输出的结果当然是全为true啦~


然而,图样图森破,它的结果是这样的:

代码的执行结果非常神奇:它并没有全部打印true,而是交替打印true和false值,这到底是为什么?
为了查清楚到底是怎么回事,我开始上网搜索相关资料,经过一番搜索后,发现正则并没有我们想象的那么简单...


what's going on?

首先正则有一个属性叫lastIndex,它表示正则下一次匹配时的起始位置。一般情况下我们是使用不到它的,但在正则中包含全局标志g时,正则的test和exec方法就会使用到它,具体规则如下:

  • 初始状态下lastIndex的值为0
  • 若成功匹配,lastIndex的值就被更新成被匹配字符串后面的第一个字符的index,或者可理解为被匹配字符串的最后一个字符index + 1
  • 若匹配失败,lastIndex则被重置为0。
  • 如果我们继续使用原先的正则进行下一轮匹配,它则会从字符串lastIndex的位置开始进行

为验证这个结论,我特意做了两个实验:

第一个就是直接将正则的lastIndex打印出来:

const reg = /\.jpg/g;
const arr = [
    'test1.jpg',
    'test2.jpg',
    'test3.jpg',
    'test4.jpg',
    'test5.jpg',
];
arr.map(item => console.log(reg.test(item), reg.lastIndex));



第二个就对数组中的字符串稍作修改:

const reg = /\.jpg/g;
const arr = [
    'test1.jpg',
    'longTest4.jpg',
    'test3.jpg',
    'longTest4.jpg',
    'test5.jpg',
];
arr.map(item => console.log(reg.test(item), reg.lastIndex));


通过两组实验的对比观察,发现确实如此:

在第一个实验中,由于数组中字符串的长度都是一致的,成功匹配后lastIndex的值直接更新为9,下次匹配的时候直接从第10个字符开始(很明显根本就没第10个字符嘛),因此匹配失败,lastIndex重置为0。以此类推,最终以9、0、9的形式交替打印。

而第二个实验由于我们增加了部分字符串的长度,因此对于第2、4个字符串而言,即使从第9个字符开始匹配,依然能匹配到后边的.jpg,故lastIndex继续更新到13


通过这次小小的实验,我们发现使用正则的时候还是要多加小心,对于test和exec方法,最好还是不要随意加上全局标志g。

来源:https://segmentfault.com/a/1190000016361529


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1072

前端的正则表达式:基本概念

正则表达式(regex)是定义搜索模式的字符序列。由于对程序员的日常工作非常有用,所以在 JavaScript 中也支持它。在这个系列文章中,我会向你展示其工作方式以及其实际用途

写出更优雅、更精确的正则表达式

这次,我们将学习如何编写更优雅的模式并定义搜索字符串的位置。我们知道星号 * 可以使表达式匹配 0 次或多次。这相当于{0,}。实际上还有其他更短的形式,使用它们可以使样式更优雅,更短。

常用正则表达式

将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。^匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性,$匹配输入字符串的结束位置

用正则匹配富文本中的文本,并替换其内容

其次需要利用字符串的 replace 函数,当第一个入参是正则的时候,第二个参数可以用函数的形式来接受正则的匹配结果,且这个函数的返回值会用来替换被正则匹配到的字符串

常用的正则表达式

正则表达式非常有用。 正则表达式可用于每种语言。 就像 JSON 一样,它们是通用的。 在日常开发中,了解一些常用的正则表达式可以大大提高你的工作效率,比如

正则表达式

正则表达式一直是困扰很多程序员的一门技术,当然也包括曾经的我。大多数时候我们在开发过程中要用到某些正则表达式的时候,都会打开谷歌或百度直接搜索然后拷贝粘贴。

javascript 正则表达式之分组与前瞻匹配详解

本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识。分组匹配:捕获性分组匹配、非捕获性分组匹配。前瞻匹配:正向前瞻匹配: (?=表达式) 后面一定要匹配有什么、反向前瞻匹配: (?!表达式) 后面一定不能要有什么

JS正则:密码强度8位以上,且包含大小写字母、数字、半角英文符号

本正则规则:包含数字,包含大写字母,包含小写字母,包含英文标点符号,至少8位以上,以上条件必须全部满足,则可以通过验证

js最新手机号码、电话号码正则表达式

一般表单页面都需要填写手机号,校验用户输入的手机号码是否正确,就要用到正则表达式,用正则表达式来匹配手机号段,如在运营商号段内,则号码正确。因此,需要知道运营商最新的号段,如下所示:

超好用的6种正则表达式,前端开发人员必知

正则表达式已经成为程序员的必备工具。几乎所有流行的编程语言都支持正则表达式,原因如下:正则表达式为开发人员提供了强有力的工具,使之能快速执行需要几十行代码才能完成的任务。本文主要研究前端开发人员经常要面对的六大文本处理和操作任务

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!