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 个人笔记(没有整理,很乱)
Jul 07 Javascript
JS解密入门之凭直觉解
Jun 25 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
Node.js笔记之process模块解读
May 31 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
javascript json 新手入门文档
2009/12/03 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
python字符串替换示例
2014/04/24 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python无损压缩图片的示例代码
2020/08/06 Python
python包的导入方式总结
2021/03/02 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
高中生家长寄语大全
2014/04/03 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
小平您好观后感
2015/06/09 职场文书
老人节主持词
2015/07/04 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL