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中的apply()方法和call()方法使用介绍
Jul 25 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
原生js实现商品筛选功能
Oct 28 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
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python复制文件操作实例详解
2015/11/10 Python
浅谈Python的异常处理
2016/06/19 Python
Python脚本处理空格的方法
2016/08/08 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python中SQLite如何使用
2020/05/27 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
乡镇法制宣传日活动总结
2015/05/05 职场文书
女方离婚起诉书
2015/05/18 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript
使用Python拟合函数曲线
2022/04/14 Python