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判断一个URL链接是否有效的实现方法
Oct 08 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
Vue简单实现原理详解
May 07 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
PL-880隐藏功能
2021/03/01 无线电
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
jstree的简单实例
2016/12/01 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Django后台admin的使用详解
2019/07/08 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
工商企业管理专业自荐信范文
2014/04/12 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
幼师求职信
2014/06/23 职场文书
学术会议通知
2015/04/15 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
MySQL创建表操作命令分享
2022/03/25 MySQL