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 相关文章推荐
图片完美缩放
Sep 07 Javascript
Cookie 注入是怎样产生的
Apr 08 Javascript
在模板页面的js使用办法
Apr 01 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
微信小程序实现单选功能
Oct 30 Javascript
最佳的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之字符串变相相减的代码
2007/03/19 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php中异常处理方法小结
2015/01/09 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
Python实现包含min函数的栈
2016/04/29 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
爱心捐助倡议书
2014/05/19 职场文书
诉前财产保全担保书
2014/05/20 职场文书
体育专业自荐书
2014/05/29 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
i7 6700处理器相当于i5几代
2022/04/19 数码科技
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android