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操纵窗口的方法小结
Jun 28 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Python中使用元类的教程
2015/04/28 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Django后台admin的使用详解
2019/07/08 Python
Python帮你识破双11的套路
2019/11/11 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
班风口号
2014/06/18 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
试了下Golang实现try catch的方法
2021/07/01 Golang
Python中字符串对象语法分享
2022/02/24 Python