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回调函数this指向问题
Feb 08 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
js简单倒计时实现代码
Apr 30 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 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
正则表达式语法
2006/10/09 Javascript
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
浅析PHP Socket技术
2013/08/02 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
Python中http请求方法库汇总
2016/01/06 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python与mysql数据库交互的实现
2020/01/06 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
学校节水倡议书
2015/04/29 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书