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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
用JavaScript显示随机图像或引用
Apr 21 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
最佳的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采集时被封ip的解决方法
2010/08/29 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
Prototype是怎么扩展DOM的
2014/10/01 面试题
财务方面个人工作的自我评价
2013/12/28 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
电子工程求职信
2014/07/17 职场文书
银行奉献演讲稿
2014/09/16 职场文书
2014年党员整改措施
2014/10/24 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
高一军训感想
2015/08/07 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Python3接口性能测试实例代码
2021/06/20 Python