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 词法作用域和闭包分析说明
Aug 12 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
Vue源码探究之状态初始化
Nov 14 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/04 冲泡冲煮
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
javascript函数库-集合框架
2007/04/27 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
浅析Vue中method与computed的区别
2018/03/06 Javascript
vue实现分页组件
2020/06/16 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python和opencv实现抠图
2018/07/18 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
英国领先的游戏零售商:GAME
2019/09/24 全球购物
小学生元旦广播稿
2014/02/21 职场文书
中学生运动会口号
2014/06/07 职场文书
担保书范本
2015/01/20 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书