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 调试利器 Firebug使用详解六
Jul 05 Javascript
js跳转页面方法总结
Jan 29 Javascript
DIV始终居中的js代码
Feb 17 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
vue实现个人信息查看和密码修改功能
May 06 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
法学毕业生自我鉴定
2014/01/31 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
酒店辞职书范文
2015/02/26 职场文书
个人自荐书怎么写
2015/03/26 职场文书
初婚初育证明范本
2015/06/18 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js