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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
AngularJS内置指令
Feb 04 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
ES6的循环与可迭代对象示例详解
Jan 31 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初学者的8点有效建议
2010/11/20 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
js实现分割上传大文件
2016/03/09 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
安全协议书
2014/04/23 职场文书
学生评语集锦
2015/01/04 职场文书
公司欠款证明
2015/06/24 职场文书
礼貌问候语大全
2015/11/10 职场文书
数据库连接池
2021/04/06 MySQL
Java的Object类的九种方法
2022/04/13 Java/Android
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers