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 $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
简单的js表单验证函数
Oct 28 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
Jquery注册事件实现方法
May 18 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
webpack 模块热替换原理
Apr 09 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JS对日期操作封装代码实例
Nov 08 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将会员数据导入到ucenter的代码
2010/07/18 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php实现的双色球算法示例
2017/06/20 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
页面中js执行顺序
2009/11/09 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
理解JS绑定事件
2016/01/19 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python中标准模块importlib详解
2017/04/16 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
IBatis持久层技术
2016/07/18 面试题
政府法律服务方案
2014/06/14 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL