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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
Jquery解析json数据详解
Dec 26 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
vue通过过滤器实现数据格式化
Jul 20 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python出现segfault错误解决方法
2016/04/16 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
优秀员工评语
2014/02/10 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
实名检举信范文
2015/03/02 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
开网店计划分析
2019/07/30 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL