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插件Style定制化方法的分析与比较
May 03 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
javascript实现前端分页效果
Jun 24 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 header Content-Type类型小结
2011/07/03 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
javascript初学者常用技巧
2014/09/02 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
jsTree使用记录实例
2016/12/01 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
python实现百度关键词排名查询
2014/03/30 Python
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
分分钟入门python语言
2018/03/20 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
客服主管岗位职责
2013/12/13 职场文书
青春演讲稿范文
2014/05/08 职场文书
python glom模块的使用简介
2021/04/13 Python
详解MySQL集群搭建
2021/05/26 MySQL
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js