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中的new的使用方法与注意事项
May 16 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
在node中如何使用 ES6
Apr 22 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
js中对象与对象创建方法的各种方法
Feb 27 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
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
JavaScript window.location对象
2014/11/14 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
javascript动态创建对象的属性详解
2018/11/07 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python网络爬虫实例讲解
2016/04/28 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python实现超级马里奥
2020/03/18 Python
基于python 凸包问题的解决
2020/04/16 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
JPA的特点
2014/10/25 面试题
房地产公司见习自我鉴定
2014/04/28 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书