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 相关文章推荐
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
vue devtools的安装与使用教程
Aug 08 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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
收音机术语解释
2021/03/01 无线电
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
浅谈php调用python文件
2019/03/29 PHP
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
javascript基础知识讲解
2017/01/11 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
浅谈python对象数据的读写权限
2016/09/12 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python实现打印实心和空心菱形
2019/11/23 Python
django中ImageField的使用详解
2020/12/21 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
学生手册评语
2014/05/05 职场文书
激励员工的口号
2014/06/16 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js