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 相关文章推荐
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
详解vue后台系统登录态管理
Apr 02 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
开始着手第一个Django项目
2015/07/15 Python
python变量不能以数字打头详解
2016/07/06 Python
Python实现简单的四则运算计算器
2016/11/02 Python
使用Python对Access读写操作
2017/03/30 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
内部类的定义、种类以及优点
2013/10/16 面试题
医务人员自我评价
2014/01/26 职场文书
政府信息公开实施方案
2014/05/09 职场文书
单位在职证明书
2014/09/11 职场文书
爱的承诺书
2015/01/20 职场文书
罚款通知怎么写
2015/04/22 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
Mysql 设置boolean类型的操作
2021/06/04 MySQL