javascript正则表达式中分组详解


Posted in Javascript onJuly 17, 2016

之前写了一篇关于正则新手入门的文章,本以为对正则表达式相对比较了解 但是今天我又遇到了一个坑,可能是自己不够细心的原因吧,今天就着重和大家分享一下javascript正则表达式中的分组。如果你对JS正则表达式不够理解 可以点击这里了解更多。

分组在正则中用的还是比较广的,我所理解的分组 就是一对括号() ,每一对括号 就代表了一个分组,

分组可以分为:

  1. 捕获性分组
  2. 非捕获性分组
  3. 捕获性分组

捕获性分组会在 比如 match exec这样的函数中以第二项,第三项的形式得到相应分组的结果。先来看一个例子吧

var reg = /test(\d+)/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", "001", index: 4, input: "new test001 test002"]

代码中 (\d+)是一个分组(有些人也叫他子模式),但是表示的都是同一个意思,上面的例子中 test001是完全匹配的结果,
然而 分组的匹配是从整个完全匹配结果(也就是test001)中来查找与子模式\d+匹配的字符,这里显然是 001.

但是今天遇到的情况是这样的

var reg = /test(\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", "1", index: 4, input: "new test001 test002"]

不同之处就是 (\d+) 改为了 (\d)+ ,整个匹配结果还是 test001 但是第一个分组匹配的结果却不同。

咱们慢慢来分析他们的区别

(\d+) 这整个是一个分组的情况,由于 默认情况下 匹配模式都是贪婪模式 也就是说尽可能多的去匹配
所有\d+ 匹配到的结果 是 001 然后 外面添加了一对括号 也就是一个分组,这样第一个分组中匹配的结果就是 001.

再来看第二个例子中的 (\d)+ 同样这也是一个贪婪模式 首先会先匹配0然后后面是0 也会匹配到 最后是1 同样也匹配到 到此 匹配结束

看起来跟第一个例子中的匹配没什么区别,但是这里的 分组(\d)表示 匹配单个数字,

按照我之前的理解是 会匹配最开始匹配到的结果 也就是0 但这种理解是错误的。由于整个匹配是贪婪模式,尽可能多的去匹配

分组中的 (\d) 就会捕获 最后一次匹配到的结果 1

如果是非贪婪模式 那就会尽可能少的去匹配

var reg = /test(\d)+?/;
 var str = 'new test001 test002';
 console.log(str.match(reg));

//["test001", "0", index: 4, input: "new test001 test002"]

这样(\d)匹配结果就是0了,虽然后面还有能够匹配到的结果,但是这里是尽可能少的去匹配

非捕获性分组

var reg = /test(?:\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", index: 4, input: "new test001 test002"]

非捕获性分组也就是 有些地方需要用到一对括号,但是又不想让他成为一个捕获性分组也就是不想让这个分组被类似 macth exec 这样的函数所获取到

通常在括号内部的前面加上?: 也就是 (?:pattern)这样就变成了一个非捕获性分组,

这样 match的结果中就不会出现分组匹配到的内容了 也就是少了 第二项的 1.

这篇文章着重说明 (\d+)和 (\d)+的区别,也是我今天踩到的坑,若有错误之处,欢迎指正。

Javascript 相关文章推荐
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
React中的refs的使用教程
Feb 13 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
最佳的JavaScript错误处理实践
Jul 16 #Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 #Javascript
js canvas实现擦除动画
Jul 16 #Javascript
微信jssdk用法汇总
Jul 16 #Javascript
详解JavaScript节流函数中的Throttle
Jul 16 #Javascript
很棒的js选项卡切换效果
Jul 15 #Javascript
轻松5句话解决JavaScript的作用域
Jul 15 #Javascript
You might like
PHP面向对象编程快速入门
2006/12/14 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
基于js 本地存储(详解)
2017/08/16 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python字符串及文本模式方法详解
2020/09/10 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
如何基于Python按行合并两个txt
2020/11/03 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
自动化毕业生专业自荐书范文
2014/02/04 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
返乡农民工证明
2015/06/24 职场文书
高质量“欢迎词”
2019/04/03 职场文书
python神经网络Xception模型
2022/05/06 Python