深入理解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正则表达式---分组就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript正则表达式中分组详解

    之前写了一篇关于正则新手入门的文章,本以为对正则表达式相对比较了解 但是今天我又遇到了一个坑,可能是自己不够细心的原因吧,今天就着重和大家分享一下javascript正则表达式中的分组.如果你对JS正则表达式不够理解 可以点击这里了解更多. 分组在正则中用的还是比较广的,我所理解的分组 就是一对括号() ,每一对括号 就代表了一个分组, 分组可以分为: 捕获性分组 非捕获性分组 捕获性分组 捕获性分组会在 比如 match exec这样的函数中以第二项,第三项的形式得到相应分组的结果.先来看一个

  • JS正则表达式获取分组内容的方法详解

    支持多次匹配的方式: 复制代码 代码如下: var testStr = "now test001 test002";   var re = /test(\d+)/ig;    var r = "";   while(r = re.exec(testStr)) {       alert(r[0] + "  " + r[1]);   } 此外也可以用testStr.match(re),但是这样的话就不能有g的选项,而且只能得到第一个匹配. 另外备忘

  • javascript正则表达式之分组概念与用法实例

    本文实例讲述了javascript正则表达式之分组概念与用法.分享给大家供大家参考,具体如下: function matchDemo(){ var s; //该表达式分了三个组:d(b+)(d).(b+).(d)这个三个组(实际上是四个组,包括本身所有的表达式) //从最左边数第一个括号为第一个组,第二个括号为第二组,以此类推,分别对应的值为RegExp.$1和RegExp.$2的值 var re = new RegExp("(d(b+)(d))","ig"); v

  • JavaScript正则表达式exec/g实现多次循环用法示例

    本文实例讲述了JavaScript正则表达式exec/g实现多次循环用法.分享给大家供大家参考,具体如下: var x = "a.xxx.com b.xxx.com c.xxx.com"; 希望得到 ["a","b","c"] 这三个结果 1. 正则需要 添加 g 2. exec 循环,直到返回空 代码如下,会输出 a b c var x = "a.xxx.com b.xxx.com c.xxx.com";

  • JavaScript正则表达式的分组匹配详解

    分组 下面的正则表达式可以匹配kidkidkid: /kidkidkid/ 而另一种更优雅的写法是: /(kid){3}/ 这里由圆括号包裹的一个小整体称为分组. 候选 一个分组中,可以有多个候选表达式,用|分隔: var reg = /I love (him|her|it)/; reg.test('I love him') // true reg.test('I love her') // true reg.test('I love it') // true reg.test('I love

  • JS 密码强度校验的正则表达式(简单且好用)

    JS 密码强度校验的正则表达式(简单且好用)

    最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>密码强度</title> <style type="text/

  • JS正则表达式之非捕获分组用法实例分析

    本文实例讲述了JS正则表达式非捕获分组用法.分享给大家供大家参考,具体如下: 最近在看JsonSQL的时候,通过源码中的一段正则表达式,了解到了什么是非捕获分组以及它的使用场景.在js中,正常的捕获分组格式是(XX),非捕获分组格式为(?:XX).我们先从正则表达式数量词说起,如果我们要求字符b至少出现一次,可以使用正则/b+/:如果要求ab至少出现一次,那么必需使用/(ab)+/,不能用/ab+/.也就是说,如果想对多个字符使用数量词,必需要用圆括号. var str = "a1***ab1c

  • 详解JavaScript正则表达式之分组匹配及反向引用

    语法 元字符:(pattern) 作用:用于反复匹配的分组 属性$1~$9 如果它(们)存在,用于得到对应分组中匹配到的子串 \1或$1 用于匹配第一个分组中的内容 \2或$2 用于匹配第一个分组中的内容 ... \9或$9 用于匹配第一个分组中的内容 用法示例 var reg = /(A+)((B|C|D)+)(E+)/gi;//该正则表达式有4个分组 //对应关系 //RegExp.$1 <-> (A+) //RegExp.$2 <-> ((B|C|D)+) //RegExp.

  • 浅谈JavaScript正则表达式分组匹配

    语法 元字符:(pattern) 作用:用于反复匹配的分组 属性$1~$9 如果它(们)存在,用于得到对应分组中匹配到的子串 \1或$1 用于匹配第一个分组中的内容 \2或$2 用于匹配第一个分组中的内容 ... \9或$9 用于匹配第一个分组中的内容 用法示例 var reg = /(A+)((B|C|D)+)(E+)/gi;//该正则表达式有4个分组 //对应关系 //RegExp.$1 <-> (A+) //RegExp.$2 <-> ((B|C|D)+) //RegExp.

  • JavaScript使用正则表达式获取全部分组内容的方法示例

    JavaScript使用正则表达式获取全部分组内容的方法示例

    本文实例讲述了JavaScript使用正则表达式获取全部分组内容的方法.分享给大家供大家参考,具体如下: 1. 需要使用正则表达式的exec 2. 需要循环 DEMO示例:(如下代码将输出 8 , 9,两个匹配到的分组内容) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS正则demo</title>

随机推荐