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 相关文章推荐
Opacity.js
Jan 22 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
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编写大型网站问题集
2007/03/06 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
常见的python正则用法实例讲解
2016/06/21 Python
python实现按任意键继续执行程序
2016/12/30 Python
python对json的相关操作实例详解
2017/01/04 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python实现图片添加文字
2019/11/26 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python流程控制常用工具详解
2020/02/24 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python之生成多层json结构的实现
2020/02/27 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
幼儿园个人总结
2015/02/28 职场文书
校友会致辞
2015/07/30 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
详解Python中*args和**kwargs的使用
2022/04/07 Python