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 相关文章推荐
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 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
php图片上传存储源码并且可以预览
2011/08/26 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
Smarty3配置及入门语法
2017/02/22 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
JS实现的省份级联实例代码
2013/06/24 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
js实现tab切换效果
2017/02/16 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python字符串的常见操作实例小结
2019/04/08 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Django 实现图片上传和下载功能
2020/12/31 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
十月份红领巾广播稿
2014/01/22 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
公司年会开场白
2015/06/01 职场文书
护士业务学习心得体会
2016/01/25 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
golang中的struct操作
2021/11/11 Golang