当前位置:首页 > 日记 > 正文

浅析正则表达式中的lastIndex以及预查

浅析正则表达式中的lastIndex以及预查

依次写出下列输出内容。

var reg1 = /a/;var reg2 = /a/g;console.log(reg1.test('abcabc')); // trueconsole.log(reg1.test('abcabc')); // trueconsole.log(reg1.test('abcabc')); // trueconsole.log(reg1.test('abcabc')); // trueconsole.log(reg2.test('abcabc')); // trueconsole.log(reg2.test('abcabc')); // trueconsole.log(reg2.test('abcabc')); // falseconsole.log(reg2.test('abcabc')); // true

很简单的一个正则表达式测试,查找字符串abcabc中是否有字符a。但是结果却有一个特殊false存在,Why?

lastIndex(针对于带参数g的正则表达式)

在每个实例化的RegExp对象中,都存在一个lastIndex属性,其初始值为0。

/a/.lastIndex // 0new RegExp('a').lastIndex // 0lastIndex表示匹配成功时候,匹配内容最后一个字符所在原字符串中的位置 + 1,也就是匹配内容的下一个字符的index(如果匹配内容在字符串的结尾,同样返回原字符串中的位置 + 1,也就是字符串的length)。如果未带参数g,lastIndex始终为0。var reg = /ab/g;reg.test('123abc');console.log(reg.lastIndex) // 5// 匹配内容在最后var reg = /ab/g;reg.test('123ab');console.log(reg.lastIndex) // 5// 不带参数gvar reg = /ab/;reg.test('123abc');console.log(reg.lastIndex) // 0

而这个lastIndex也就是用该正则进行其他匹配操作的时候匹配开始的位置。而匹配失败时重置lastIndex为0。

var reg = /ab/g;// 初始值为0,从最开始匹配 匹配成功, lastIndex为4console.log(reg.test('12ab34ab'), reg.lastIndex); // true 4// 从第4位字符"3"开始匹配 匹配内容为第二个ab lastIndex 为 8console.log(reg.test('12ab34ab'), reg.lastIndex); // true 8// 从第8位 (字符长度为8,没有第8位) 开始匹配 匹配不成功 重置lastIndex 为 0console.log(reg.test('12ab34ab'), reg.lastIndex); // false 0// 从头匹配 同第一步console.log(reg.test('12ab34ab'), reg.lastIndex); // true 4

看到这里题目也就解答完毕,接下来是扩展。

对于未重新声明的reg容易犯错的地方。

// 测试字符串str1 和 str2 是否都含有ab字符var reg = /ab/g;var str1 = '123ab';var str2 = 'ab123';console.log(reg.test(str1)); // trueconsole.log(reg.test(str2)); // false

很明显这里因为lastIndex的原因导致判断错误。这里可以修改reg不带参数g或则重新声明reg,当然也可以在第一次匹配后手动修改reg.lastIndex = 0。

预查

接着说预查,字面意思就是预备匹配查询,也就是查询匹配内容接下来的内容,但是只是预备查询匹配,并不返回。

经常我们需要匹配到字符串中某些字符后面跟某些字符,但是我们不需要匹配结果中包含后面跟的字符,例如:

找出下面字符串中字符后面是2的所有字符。

var str = 'a1b2c22d31e4fg6h2';'a1b2c22d31e4fg6h2'.match(/[a-z]2/g); // ["b2", "c2", "h2"]

这样,虽然能匹配出字符串带2的,但是数字2我们并不需要,这里只需要字符。而用预查:

'a1b2c22d31e4fg6h2'.match(/[a-z](?=2)/g); // ["b", "c", "h"]

可以看到完全满足条件,但是预查和本文的主题lastIndex又有几毛钱的关系呢?

我们用test来看看,至于为什么用test这里要说明一下,match是匹配所有,直到匹配不成功的时候结束匹配,而匹配不成功时,lastIndex就被重置为0了。

而exec和test是第一次匹配成功或者匹配失败就返回,并不会接着往下匹配。

var reg1 = /[a-z](?=2)/g;var reg2 = /[a-z]2/g;var str = 'a1b2c22d31e4fg6h2';console.log(reg1.test(str), reg1.lastIndex); // true 3console.log(reg1.test(str), reg1.lastIndex); // true 5console.log(reg1.test(str), reg1.lastIndex); // true 16console.log(reg1.test(str), reg1.lastIndex); // false 0console.log(reg2.test(str), reg2.lastIndex); // true 4console.log(reg2.test(str), reg2.lastIndex); // true 6console.log(reg2.test(str), reg2.lastIndex); // true 17console.log(reg2.test(str), reg2.lastIndex); // false 0

看出问题没有?预查的lastIndex不包含预查内容! 这里就可以用来简化很多判断了。

例如我们要匹配密码必须有至少一个大写字母,一个小写字母,一个数字,并且长度至少6位而且只能是数字字母组合。

按照不会预查的情况会这样去判断:

/[a-z]/.test(pwd) && /[A-Z]/.test(pwd) && /\d/.test(pwd) && /^[a-zA-Z0-9]{6,}$/.test(pwd);

但是:

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z0-9]{6,}$/.test(pwd)

分解出来看:

(?=.*[a-z]) 是否有小写字母 但是是预查 匹配失败返回false 成功lastIndex不变动,还是为0,同理理解两外预查内容,最后就是6喂以上的字母数字组合匹配,但是前面都是预查,lastIndex始终未0,每次匹配都是从最开始匹配的,所以满足要求。

以上所述是小编给大家介绍的浅析正则表达式中的lastIndex以及预查,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

微信小程序 http请求的session管理

微信小程序 http请求的session管理

请求,程序,电脑软件,微信小,session,微信小程序 http请求的session管理作为一个开发JavaWeb应用的程序猿,都喜欢将用户登录后的用户信息(比如说用户id,用户名称)放入session中保存,之后在业务逻辑的开发中需要用到用户信息的时候就可以轻松又方…

PS怎么设计一款漂亮的梅花字体的文

PS怎么设计一款漂亮的梅花字体的文

文字,字体,漂亮,电脑软件,PS,艺术字是平面设计作品中常用的一种形式,今天,我们就要学学梅花字的制作技巧,从在PS的各种工具的使用技巧上再进行一次深入的探索,对于相关艺术字的创意与技术进行一次很好的体验。软件名称:Adobe Photoshop 8.0 中文…

ps怎么设计一个彩色的抽象电视机标

ps怎么设计一个彩色的抽象电视机标

抽象,彩色,标志,电脑软件,ps,ps中想要制作一个彩色的抽象电视机图标,该怎么制作呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、要想绘制出让人眼前一亮的电视机标志就…

Word如何去掉每行后的回车符但保留

Word如何去掉每行后的回车符但保留

回车符,段落,符号,电脑软件,Word,  word中总是默认出来很多回车符,在去除回车符的时候,正常的段落回车符也被去除了。以下是小编为您带来的关于Word去掉每行后的回车符但保留段落符号,希望对您有所帮助。Word去掉每行后的回车符但保留段落符…

PS合成制作出在云海中的泛舟的美女

PS合成制作出在云海中的泛舟的美女

云海,出在,场景,梦幻,美女,现阶段这部分教程适合初级设计师,画面简洁,用到的素材少,只需要溶图,抠图,调色等,可以迅速掌握合成思路。最终效果一、创建背景层。 12 3 4 5 6 阅读全文二、添加树元素。 1 23 4 5 6 阅读全文三、添加小船。 1 2 3…

PS使用3D工具7步打造出简单炫酷的

PS使用3D工具7步打造出简单炫酷的

教程,工具,3D,山脉,星辰,效果图:素材图:主要过程:教程结束,以上就是PS使用3D工具7步打造出简单炫酷的星辰山脉效果教程的全部内容,希望大家喜欢!相关教程推荐:PS怎么设计漂亮的星云艺术字体? PS制作自定义星星图案Photoshop为山水图片制作模拟耶稣…

word文档中怎么画横线word文档中画

word文档中怎么画横线word文档中画

文档,步骤,方法,电脑软件,word,  很多人使用word做试卷时,不知道填空题里的横线怎么画出来。其实这个是非常简单的,当我们掌握这一技巧,对我们以后出试卷非常有帮助。那么下面就由小编给大家分享下word文档中画横线的技巧,希望能帮助到您。wo…

设计PPT时插入flash有哪些方法技巧

设计PPT时插入flash有哪些方法技巧

方法,文件,动画,超链接,扩展,  在制作PPT过程中,很多人喜欢插入flash动画,方便、省事。但插入过程中有很多小技巧,一不注意就会白费功夫。以下是小编为您带来的关于设计PPT时插入flash的五种技巧,希望对您有所帮助。方法一:将扩展名为. SWF的F…

React-Native实现ListView组件之上

React-Native实现ListView组件之上

组件,通用,上拉刷新,实例,电脑软件,在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中…

ps给背景较暗的室内少女人像照片调

ps给背景较暗的室内少女人像照片调

照片,人像,唯美,朦胧,背景,使用Photoshop给背景较暗的室内少女人像照片调出唯美朦胧感,从原图可以看出室内较暗,加上符合主题照片的整体思路是清透,为了达到这么目的我们将做一下修改,包括曝光、对比度&清晰度、高光、阴影&白色、以及黑色的调…

AngularJS 支付倒计时功能实现思路

AngularJS 支付倒计时功能实现思路

功能实现,支付,倒计时,思路,电脑软件,说明:1、前端只负责展示倒计时,不具备实际功能;2、实际实现方式:数据库中设置一个每分钟执行一次的定时任务(故与实际情况会有一分钟以内的误差),只要订单创建时间超过15分钟会自动将订单状态改为“取消”。遇…

详解Vue 2.0封装axios笔记

详解Vue 2.0封装axios笔记

封装,详解,笔记,电脑软件,Vue,前言单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等),今天我们主要讲解Ajax部分。最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方…