JS中正则表达式要注意lastIndex属性


Posted in Javascript onAugust 08, 2017

 说明

这篇文章,主要和大家聊聊JavaScript中RegExp对象的属性。

解释

每个RegExp对象都包含5个属性,source、global、ignoreCase、multiline、lastIndex。

source:是一个只读的字符串,包含正则表达式的文本。

var reg = /JavaScript/;
reg.source; //返回 JavaScript

global:是一个只读的布尔值,看这个正则表达式是否带有修饰符g。

修饰符g,是全局匹配的意思,检索字符串中所有的匹配。

var str = "JavaScript";
str.match(/JavaScript/); //只能匹配一个JavaScript 
var str = "JavaScript JavaScript";
str.match(/JavaScript/g); //能匹配两个JavaScript 
var reg = /JavaScript/;
reg.global; //返回 false
var reg = /JavaScript/g;
reg.global; //返回 true

ignoreCase:是一个只读的布尔值,看这个正则表达式是否带有修饰符i。

修饰符i,说明模式匹配是不区分大小写的。

var reg = /JavaScript/;
reg.ignoreCase; //返回 false
var reg = /JavaScript/i;
reg.ignoreCase; //返回 true
var reg = /JavaScript/;
reg.test("javascript"); //返回 false
var reg = /JavaScript/i;
reg.test("javascript"); //返回 true

multiline:是一个只读的布尔值,看这个正则表达式是否带有修饰符m。

修饰符m,用以在多行模式中执行匹配,需要配合^ 和 $</code> 使用,使用<code>^</code> 和 <code>$ 除了匹配整个字符串的开始和结尾之外,还能匹配每行的开始和结尾。

var str="java\nJavaScript";
str.match(/^JavaScript/); //返回null
var str="java\nJavaScript";
str.match(/^JavaScript/m); //匹配到一个JavaScript
var reg=/JavaScript/;
reg.multiline; //返回false
var reg=/JavaScript/m;
reg.multiline; //返回true

lastIndex:是一个可读/写的整数,如果匹配模式中带有g修饰符,这个属性存储在整个字符串中下一次检索的开始位置,这个属性会被exec( ) 和 test( ) 方法用到。

exec( )方法是在一个字符串中执行匹配检索,如果它没有找到任何匹配,它就返回null,但如果它找到了一个匹配,它就返回一个数组。

当调用exec( )的正则表达式对象具有修饰符g时,它将把当前正则表达式对象的lastIndex属性设置为紧挨着匹配子串的字符位置,当同一个正则表达式第二次调用exec( ),它会将从lastIndex属性所指示的字符串处开始检索,如果exec( )没有发现任何匹配结果,它会将lastIndex重置为0。

JS中正则表达式要注意lastIndex属性

test( )方法,它的参数是一个字符串,用test( )对某个字符串进行检测,如果包含正则表达式的一个匹配结果,则返回true,否则返回false。

var str="java";
var reg=/JavaScript/;
reg.test(str); //返回false
var str="JavaScript";
var reg=/JavaScript/;
reg.test(str); //返回true

当调用test( )的正则表达式对象具有修饰符g时,它的行为和exec( )相同,因为它从lastIndex指定的位置处开始检索某个字符串,如果它找到了一个匹配结果,那么它就立即设置lastIndex为紧挨着匹配子串的字符位置

看看下面这段有趣的代码

var str="JavaScript";
var reg=/JavaScript/g;
console.log(reg.test(str)); //打印 true
console.log(reg.test(str)); //打印 false

为什么同样的字符串,同样的正则表达式,却打印的不一样,如果你已经理解了 lastIndex属性,那你一定明白为什么。

我们来看看到底发什么了什么

var str="JavaScript";
var reg=/JavaScript/g;
console.log(reg.test(str)); //打印 true
console.log(reg.lastIndex);
//打印10,因为匹配到了JavaScript,所以设置lastIndex为匹配结果紧挨着的字符位置
console.log(reg.test(str));
//打印 false,因为从lastIndex位置检索字符串,已经没有匹配结果了
console.log(reg.lastIndex);
//打印0,因为没有匹配到结果,所以将lastIndex重置为0

这里注意一点,如果第一次调用test( )匹配结束后,我们手动将lastIndex重置为0,那么第二次调用test( ),同样可以打印true

var str="java JavaScript java";
var reg=/JavaScript/g;
console.log(reg.test(str)); //打印 true
reg.lastIndex=0;
console.log(reg.test(str)); //打印 true

在强调一次,上面说的关于lastIndex的问题,都是因为正则表达式对象中带有修饰符g,如果不带有修饰符g,就不用担心这些问题了。

总结

这次主要是说说,JavaScript中正则表达式对象的5个属性,而最需要注意的就是lastIndex属性了。

Javascript 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 #Javascript
React Native如何消除启动时白屏的方法
Aug 08 #Javascript
react native带索引的城市列表组件的实例代码
Aug 08 #Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 #Javascript
React-Native 组件之 Modal的使用详解
Aug 08 #Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 #Javascript
You might like
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python读写ini文件的方法
2015/05/28 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python中字符串与编码示例代码
2019/05/20 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
什么是索引指示器
2012/08/20 面试题
教师专业自荐书范文
2014/02/10 职场文书
初三英语教学计划
2015/01/23 职场文书
会议开幕词
2015/01/28 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript