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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
vue+Element-ui实现分页效果
Nov 15 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
python实现的一个火车票转让信息采集器
2014/07/09 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python生成圆形图片的方法
2020/03/25 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
司机的工作范围及职责
2013/11/13 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
公开承诺书格式
2014/05/21 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python