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 相关文章推荐
JQuery live函数
Dec 24 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
JS实现页面炫酷的时钟特效示例
Aug 14 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实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python制作简易注册登录系统
2016/12/15 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python3安装crypto出错及解决方法
2019/07/30 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
经典大学生求职信范文
2014/01/06 职场文书
情人节活动策划方案
2014/02/27 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
门店业绩提升方案
2014/06/08 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL