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表单验证代码
Aug 02 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
javascript代码加载优化方法
Jan 30 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
中止javascript执行的方法
2014/02/14 Javascript
javascript常用方法总结
2015/05/14 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Linux下为不同版本python安装第三方库
2016/08/31 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
Laravel中Kafka的使用详解
2021/03/24 PHP
最受欢迎的自我评价
2013/12/22 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
使用Redis实现分布式锁的方法
2022/06/16 Redis