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 相关文章推荐
javascript整除实现代码
Nov 23 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
js Dom实现换肤效果
Oct 21 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
js实现带搜索功能的下拉框
Jan 11 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错误提示的关闭方法详解
2013/06/23 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php数组随机排序实现方法
2015/06/13 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
PHP重载基础知识回顾
2020/09/10 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
JsRender实用入门教程
2014/10/31 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
Python continue继续循环用法总结
2018/06/10 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
公司承诺书范文
2014/05/19 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
课程设计感想范文
2015/08/11 职场文书
六年级作文之预言作文
2019/10/25 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
Go 内联优化让程序员爱不释手
2022/06/21 Golang