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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
js函数排序的实例代码
Jul 01 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
javascript基本算法汇总
Mar 09 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
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
德生S2000电路分析
2021/03/02 无线电
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python爬虫教程知识点总结
2020/10/19 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
自我鉴定怎么写
2013/12/05 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
食堂标语大全
2014/06/11 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
倡议书格式及范文
2015/04/29 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js