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中的prototype使用说明
Apr 13 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
jquery 插件学习(三)
Aug 06 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
js中创建对象的几种方式
Feb 05 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 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
第一个无线电台是由谁发明的
2021/03/01 无线电
php微信公众号js-sdk开发应用
2016/11/28 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
python中列表和元组的区别
2017/12/18 Python
谈谈python中GUI的选择
2018/03/01 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python3实现猜数字游戏
2020/12/07 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
机电一体化专业推荐信
2013/12/03 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
学校安全责任书范本
2014/07/23 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
学习心得体会
2019/06/20 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL