深入理解JS正则表达式---分组

 更新时间:2016年07月18日 09:10:59   投稿:jingxian  
下面小编就为大家带来一篇深入理解JS正则表达式---分组。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

深入理解JS正则表达式---分组

之前写了一篇关于正则新手入门的文章,本以为对正则表达式相对比较了解 但是今天我又遇到了一个坑,可能是自己不够细心的原因吧,今天就着重和大家分享一下javascript正则表达式中的分组。如果你对JS正则表达式不够理解 可以点击这里了解更多。

分组在正则中用的还是比较广的,我所理解的分组 就是一对括号() ,每一对括号 就代表了一个分组,分组可以分为:

•捕获性分组
•非捕获性分组

捕获性分组

捕获性分组会在 比如 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了,虽然后面还有能够匹配到的结果,但是这里是尽可能少的去匹配

非捕获性分组

非捕获性分组也就是 有些地方需要用到一对括号,但是又不想让他成为一个捕获性分组也就是不想让这个分组被类似 macth exec 这样的函数所获取到通常在括号内部的前面加上?: 也就是 (?:pattern)这样就变成了一个非捕获性分组,

var reg = /test(?:\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));//["test001", index: 4, input: "new test001 test002"]

这样 match的结果中就不会出现分组匹配到的内容了 也就是少了 第二项的 1.

这篇文章着重说明 (\d+)和 (\d)+的区别,也是我今天踩到的坑,若有错误之处,欢迎指正。

以上这篇深入理解JS正则表达式---分组就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript入门之对象与JSON详解

    JavaScript入门之对象与JSON详解

    JSON是JavaScript中对象的字面量,是对象的表示方法,通过使用JSON,可以减少中间变量,使代码的结构更加清晰,也更加直观。使用JSON,可以动态的构建对象,而不必通过类来进行实例化,大大的提高了编码的效率
    2011-10-10
  • JS 实现计算器详解及实例代码(一)

    JS 实现计算器详解及实例代码(一)

    这篇文章主要介绍了JS 实现计算器详解及实例代码的相关资料,这里对实现计算器的思路及实现步骤进行了一一详解,需要的朋友可以参考下
    2017-01-01
  • JavaScript中几种排序算法的简单实现

    JavaScript中几种排序算法的简单实现

    这篇文章主要介绍了JavaScript中几种排序算法的简单实现,排序是各种编程语言学习中都是共通的必会的基础,需要的朋友可以参考下
    2015-07-07
  • JavaScript中var关键字的使用详解

    JavaScript中var关键字的使用详解

    这篇文章主要介绍了JavaScript中var关键字的使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
    2015-08-08
  • 谈谈JavaScript中的几种借用方法

    谈谈JavaScript中的几种借用方法

    我们下面来看一篇关于JavaScript中借用方法的一个详细介绍,注意:本文假设你已经掌握使用 call()、apply()和bind()的相关知识和它们之间的区别,希望这篇文章能够让各位了解到JavaScript中的借用方法吧。
    2016-08-08
  • Python脚本后台运行的几种方式

    Python脚本后台运行的几种方式

    这篇文章主要介绍了Python脚本后台运行的几种方式,linux下后台运行、通过upstart方式实现、通过bash脚本实现、通过screen、tmux等方式实现,需要的朋友可以参考下
    2015-03-03
  • 再探JavaScript作用域

    再探JavaScript作用域

    这篇文章主要介绍了再探JavaScript作用域,本文用简洁的语言和直观的测试结果图片给大家讲解JavaScript的作用域,需要的朋友可以参考下
    2014-09-09
  • 取得父标签

    取得父标签

    取得父标签...
    2006-11-11
  • JavaScript中的Math.atan2()方法使用详解

    JavaScript中的Math.atan2()方法使用详解

    这篇文章主要介绍了JavaScript中的Math.atan2()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • javascript的BOM

    javascript的BOM

    BOM是浏览器的窗口对象,提供了很多窗口处理的API。在webapp框架越来越多的情况下,需要我们在同一窗口处理不同页面、不同的ajax数据,则需要我们熟悉BOM的内容。
    2016-05-05

最新评论