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实现单一html页面两套css切换代码
Apr 11 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 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统计文章排行示例
2014/03/04 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
vuex的简单使用教程
2018/02/02 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
详解Python迭代和迭代器
2016/03/28 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
举例讲解Python常用模块
2019/03/08 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
应届生求职推荐信
2013/10/28 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
汽车维修求职信
2014/06/15 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
测量员岗位职责
2015/02/14 职场文书
朋友聚会开场白
2015/06/01 职场文书