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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
php创建图像具体步骤
2017/03/13 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
更正确的asp冒泡排序
2007/05/24 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
vue登录注册及token验证实现代码
2017/12/14 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python数据挖掘需要学的内容
2019/06/23 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
东方通信股份有限公司VC面试题
2014/08/27 面试题
办公室主任职责范文
2013/11/08 职场文书
部队学习十八大感言
2014/01/11 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
预备党员转正考核材料
2014/06/03 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书