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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
详解jQuery事件
2017/01/13 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python正则表达式使用经典实例
2016/06/21 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
python实现八大排序算法(1)
2017/09/14 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python实现根据文件格式分类
2019/10/31 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
优秀大学生推荐信范文
2013/11/28 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
爱心捐助倡议书
2014/05/19 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
学历证明样本
2015/06/16 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书