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实现客户端表格的分页、排序功能代码
Mar 16 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
Vue实现PopupWindow组件详解
2018/04/28 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Django 重写用户模型的实现
2019/07/29 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
社团文化节策划书
2014/02/01 职场文书
推广普通话演讲稿
2014/05/23 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
五一劳动节慰问信
2015/02/14 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Win11查看设备管理器
2022/04/19 数码科技
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库