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 相关文章推荐
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 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学习笔记 类的声明与对象实例化
2011/06/13 PHP
php共享内存段示例分享
2014/01/20 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
php实现头像上传预览功能
2017/04/27 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python实现的排列组合计算操作示例
2017/10/13 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python打开使用的方法
2019/09/30 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
联想C++笔试题
2012/06/13 面试题
元旦晚会策划方案
2014/02/18 职场文书
犯错检讨书
2014/02/21 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书