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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
微信小程序文章列表功能完整实例
Jun 03 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
python 绘制正态曲线的示例
2020/09/24 Python
python中pyplot基础图标函数整理
2020/11/10 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
策划主管的工作职责
2013/11/24 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
校长师德表现自我评价
2015/03/04 职场文书
校长新学期致辞
2015/07/30 职场文书