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 学习笔记 选择器之二
Jul 23 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
js实现星星打分效果
Jul 05 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 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速度全攻略
2006/10/09 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
解密效果
2006/06/23 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
javascript计时器详解
2015/02/28 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序实现拖拽功能
2019/09/26 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
信息技术课后反思
2014/04/27 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
班主任工作实习计划
2015/01/16 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书