JS正则表达式修饰符global(/g)用法分析


Posted in Javascript onDecember 27, 2016

本文实例讲述了JS正则表达式修饰符global(/g)用法。分享给大家供大家参考,具体如下:

/g修饰符代表全局匹配,查找所有匹配而非在找到第一个匹配后停止。先看一段经典代码:

var str = "123#abc";
var noglobal = /abc/i;//非全局匹配模式
console.log(re.test(str)); //输出ture
console.log(re.test(str)); //输出ture
console.log(re.test(str)); //输出ture
console.log(re.test(str)); //输出ture
var re = /abc/ig;//全局匹配
console.log(re.test(str)); //输出ture
console.log(re.test(str)); //输出false
console.log(re.test(str)); //输出ture
console.log(re.test(str)); //输出false

可以看到:当使用/g模式的时候,多次执行RegExp.test()的输出结果会有差别。下面的解释摘抄自这篇文章《Javascript中正则表达式的全局匹配模式分析》:

 在创建正则表达式对象时如果使用了“g”标识符或者设置它了的?global属性值为ture时,那么新创建的正则表达式对象将使用模式对要将要匹配的字符串进行全局匹配。在全局匹配模式下可以对指定要查找的字符串执行多次匹配。每次匹配使用当前正则对象的lastIndex属性的值作为在目标字符串中开 始查找的起始位置。lastIndex属性的初始值为0,找到匹配的项后lastIndex的值被重置为匹配内容的下一个字符在字符串中的位置索引,用来标识下次执行匹配时开始查找的位置。如果找不到匹配的项lastIndex的值会被设置为0。当没有设置正则对象的全局匹配标志时lastIndex属性的值始终为0,每次执行匹配仅查找字符串中第一个匹配的项。

可以通过下面这段代码验证lastIndex在/g模式下的表现:

var str = "012345678901234567890123456789";
var re = /123/g;
console.log(re.lastIndex); //输出0,正则表达式刚开始创建
console.log(re.test(str)); //输出ture
console.log(re.lastIndex); //输出4
console.log(re.test(str)); //输出true
console.log(re.lastIndex); //输出14
console.log(re.test(str)); //输出ture
console.log(re.lastIndex); //输出24
console.log(re.test(str)); //输出false
console.log(re.lastIndex); //输出0,没有找到匹配项被重置

上面我们看到了/g模式对于RegExp.test()函数的影响,现在我们看下对RegExp.exec()函数的影响。RegExp.exec()返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

var str = "012345678901234567890123456789";
var re = /abc/;
//exec没有找到匹配
console.log(re.exec(str));//null
console.log(re.lastIndex);//0
var str = "012345678901234567890123456789";
var re = /123/;
var resultArray = re.exec(str);
console.log(resultArray[0]);//匹配结果123
console.log(resultArray.input);//目标字符串str
console.log(resultArray.index);//匹配结果在原始字符串str中的索引

对于RegExp.exec方法,不加入g,则只返回第一个匹配,无论执行多少次均是如此;如果加入g,则第一次执行也返回第一个匹配,再执行返回第二个匹配,依次类推。

var str = "012345678901234567890123456789";
var re = /123/;
var globalre = /123/g;
//非全局匹配
var resultArray = re.exec(str);
console.log(resultArray[0]);//输出123
console.log(resultArray.index);//输出1
console.log(globalre.lastIndex);//输出0
var resultArray = re.exec(str);
console.log(resultArray[0]);//输出123
console.log(resultArray.index);//输出1
console.log(globalre.lastIndex);//输出0
//全局匹配
var resultArray = globalre.exec(str);
console.log(resultArray[0]);//输出123
console.log(resultArray.index);//输出1
console.log(globalre.lastIndex);//输出4
var resultArray = globalre.exec(str);
console.log(resultArray[0]);//输出123
console.log(resultArray.index);//输出11
console.log(globalre.lastIndex);//输出14

当使用/g匹配模式的时候,我们可以通过循环,获取所有的匹配项。

var str = "012345678901234567890123456789";
var globalre = /123/g;
//循环遍历,获取所有匹配
var result = null;
while ((result = globalre.exec(str)) != null)
{
 console.log(result[0]);
 console.log(globalre.lastIndex);
}
Javascript 相关文章推荐
JS调用CS里的带参方法实例
Aug 01 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 #Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 #Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 #Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 #Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 #Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 #Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 #Javascript
You might like
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
javascript天然的迭代器
2010/10/29 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python web框架学习笔记
2016/05/03 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python实现超级玛丽游戏
2020/03/18 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
什么是GWT的Entry Point
2013/08/16 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
文明之星事迹材料
2014/05/09 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
大学军训决心书
2015/02/05 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
情感电台广播稿
2015/08/18 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
教师读书活动心得体会
2016/01/14 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android