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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP常用的小程序代码段
2015/11/14 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python 布尔操作实现代码
2013/03/23 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
初中生学习的自我评价
2013/11/14 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
小学生校园广播稿
2014/09/28 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
会议室管理制度范本
2015/08/06 职场文书