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代码
Aug 18 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
js模糊查询实例分享
Dec 26 Javascript
vue.js语法及常用指令
Oct 29 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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中cookie的作用域
2008/03/27 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python 切分数组实例解析
2019/11/07 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
商务会议邀请函
2014/01/09 职场文书
森林防火标语
2014/06/23 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
Python 数据可视化之Matplotlib详解
2021/11/02 Python