javascript 使用正则test( )第一次是 true,第二次是false


Posted in Javascript onFebruary 22, 2017

1.前言

今天朋友问我一个问题,我现在需要多次匹配同一个内容,但是为什么我第一次匹配,直接是 true,而第二次匹配确实 false 呢?

var s1 = "MRLP";
var s2 = "MRLP";
var reg = /mrlp/ig;
console.log(reg.test(s1));
console.log(reg.test(s2));

这时候你会发现,我们在连续使用一个正则匹配其他字符串的时候,第一次匹配是 true,而第二次匹配则是 false。

等等,WHT?我匹配的是 MRLP,而且我还特意加上i 用于不区分大小写,可以为什么第一次可以正常匹配,第二次就不行了呢?

这也就是我今天要跟大家说的,关于 JS 中的 lastIndex。

2. lastIndex

在开始讲解之前,首先先带大家简单回顾一下 JS中正则表达式的使用方式。

JS 中正则表达式的使用方式有两种:

第一种是正则表达式对象的方法,常用方法有两个。

  • exec(str) : 检索字符串中指定的值。返回找到的值,并确定其位置
  • test(str) : 检索字符串中指定的值。返回 true 或 false

第二种是字符串对象的方法,常用方法有四个。

  1. match(regexp) : 找到一个或多个正则表达式的匹配
  2. replace(regexp) : 替换与正则表达式匹配的子串
  3. search(regexp) : 检索与正则表达式相匹配的值
  4. split(search) : 把字符串分割为字符串数组

而这些方法和咱们今天所说的 lastIndex 有什么关系呢?

lastIndex 属性用于规定下次匹配的起始位置。

上次匹配的结果是由方法 RegExp.exec( ) 和 RegExp.test( ) 找到的,它们都以 lastIndex 属性所指的位置作为下次检索的起始点。

这样,就可以通过反复调用这两个方法来遍历一个字符串中的所有匹配文本。

而且需要注意,该属性只有设置标志 g才能使用。

既然已经知道这个东西的形成原因,那么解决起来就非常简单了。

3.解决方案

3.1 第一种解决方案

如上面所述,我们 lastIndex 属性必须要设置 g 标签才能使用。

那么我们在匹配的时候,可以根据情况,直接去掉 g 标签就可以啦。

var s1 = "MRLP";
var s2 = "MRLP";
var reg = /mrlp/i;
console.log(reg.test(s1)); //true
console.log(reg.test(s2)); //true

3.2 第二种解决方案

很多时候,我们必须要执行 全局匹配( g ),这时候就不能使用第一种方案了。

其实,我们的lastIndex 属性是可读可写的。

只要目标字符串的下一次搜索开始,就可以对它进行设置。

当方法 exec() 或 test() 再也找不到可以匹配的文本时,它们会自动把 lastIndex 属性重置为 0。

这样,我们再次执行全局匹配的时候,就不会出现 false 的情况了。

var s1 = "3206064928:MRLP:3206064928";
var s2 = "MRLP";
var reg = /mrlp/ig;
console.log(reg.test(s1)); //true
console.log(reg.lastIndex);  //reg.lastIndex = 15
reg.lastIndex = 0;     //这里我将 lastIndex 重置为 0
console.log(reg.test(s2)); //true

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
JavaScript实现256色转灰度图
Feb 22 #Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 #Javascript
微信小程序 扎金花简单实例
Feb 21 #Javascript
angular中的http拦截器Interceptors的实现
Feb 21 #Javascript
微信小程序 PHP生成带参数二维码
Feb 21 #Javascript
vue-resource 拦截器使用详解
Feb 21 #Javascript
微信小程序 template模板详解及实例
Feb 21 #Javascript
You might like
php简单浏览目录内容的实现代码
2013/06/07 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
js初始化验证实例详解
2016/11/26 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
JS实现小星星特效
2019/12/24 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
python中 logging的使用详解
2017/10/25 Python
彻底理解Python list切片原理
2017/10/27 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
python带参数打包exe及调用方式
2019/12/21 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
编写strcpy函数
2014/06/24 面试题
教师应聘个人求职信
2013/12/10 职场文书
公积金转移接收函
2014/01/11 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
远程教育学习心得体会
2016/01/23 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js