javascript正则表达式中分组详解

 更新时间:2016年07月17日 19:01:06   作者:wubetter  
这篇文章主要介绍了javascript正则表达式中分组的相关资料,包括捕获性分组和非捕获性分组,需要的朋友可以参考下

之前写了一篇关于正则新手入门的文章,本以为对正则表达式相对比较了解 但是今天我又遇到了一个坑,可能是自己不够细心的原因吧,今天就着重和大家分享一下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)+的区别,也是我今天踩到的坑,若有错误之处,欢迎指正。

相关文章

  • bootstrap table表格使用方法详解

    bootstrap table表格使用方法详解

    这篇文章主要为大家详细介绍了bootstrap table表格使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 详细分析JavaScript中的深浅拷贝

    详细分析JavaScript中的深浅拷贝

    这篇文章主要介绍了JavaScript中的深浅拷贝,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • js实现连续英文字符自动换行兼容ie6 ie7和firefox

    js实现连续英文字符自动换行兼容ie6 ie7和firefox

    英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox,使用CSS控制强制换行实现不了的朋友可以尝试下
    2013-09-09
  • JS数组及对象遍历方法代码汇总

    JS数组及对象遍历方法代码汇总

    这篇文章主要介绍了JS数组及对象遍历方法代码汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 今天,小程序正式支持 SVG

    今天,小程序正式支持 SVG

    这篇文章主要介绍了小程序支持SVG,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • LayUI动态设置checkbox不显示的解决方法

    LayUI动态设置checkbox不显示的解决方法

    今天小编就为大家分享一篇LayUI动态设置checkbox不显示的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • WebSocket的简单介绍及应用

    WebSocket的简单介绍及应用

    因此,如果让服务器端也可以主动发送信息到客户端,就可以很大程度改进这些不足。WebSocket就是一个实现这种双向通信的新协议。下面小编来简单介绍下它
    2019-05-05
  • echarts饼图标签formatter使用及饼图自定义标签

    echarts饼图标签formatter使用及饼图自定义标签

    项目中有遇到需要使用饼图展示每种状态所占比例,去echarts官网学习了一番,下面这篇文章主要给大家介绍了关于echarts饼图标签formatter使用及饼图自定义标签的相关资料,需要的朋友可以参考下
    2022-12-12
  • 浅谈时钟的生成(js手写简洁代码)

    浅谈时钟的生成(js手写简洁代码)

    下面小编就为大家带来一篇浅谈时钟的生成(js手写简洁代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • uniapp实现微信公众号支付的方法步骤

    uniapp实现微信公众号支付的方法步骤

    本文主要介绍了uniapp实现微信公众号支付的方法步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论