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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jquery datatable服务端分页
Aug 31 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
JsChart组件使用详解
Mar 04 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 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
239军机修复记
2021/03/02 无线电
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
JSON Web Tokens的实现原理
2017/04/02 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
文员个人的求职信范文
2013/09/26 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
小学中秋节活动方案
2014/02/06 职场文书
跳蚤市场口号
2014/06/13 职场文书
学校创先争优活动总结
2014/08/28 职场文书
计算机实训报告范文
2014/11/05 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
感谢师恩主题班会
2015/08/17 职场文书
python随机打印成绩排名表
2021/06/23 Python