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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
如何编写高质量JS代码
Dec 28 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
vue配置接口域名方法总结
May 12 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python使用minidom读写xml的方法
2015/06/03 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
c语言常见笔试题总结
2016/09/05 面试题
材料专业大学毕业生自荐书
2014/07/02 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python