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 学习之旅 (3)
Feb 05 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
微信小程序实现录音功能
Nov 22 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
网页常用特效代码整理
2006/06/23 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Python操作csv文件实例详解
2017/07/31 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Python下简易的单例模式详解
2019/04/08 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
scrapy头部修改的方法详解
2020/12/06 Python
Python的信号库Blinker用法详解
2020/12/31 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
小学生演讲稿
2014/01/12 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
react国际化react-intl的使用
2021/05/06 Javascript