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 21 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
php根据年月获取季度的方法
2014/03/31 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php短信接口代码
2016/05/13 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
C#面试题
2016/05/06 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python