正则表达式的捕获性分组/反向引用

分组

正则的分组主要通过小括号来实现，括号包裹的子表达式作为一个分组，括号后可以紧跟限定词表示重复次数。如下，小括号内包裹的 abc 便是一个分组:

// (abc)+ 表示匹配一个或多个"abc"，因为字符串"abc123"含有"abc"，所以匹配成功一个"abc"
/(abc)+/.test("abc123") == true

那么分组有什么用呢? 一般来说, 分组是为了表示一个整体；除此之外，还有一个作用就是用于捕获。

捕获性分组和反向引用

捕获性分组，通常由一对小括号加上子表达式组成。捕获性分组会创建反向引用，每个反向引用都由一个编号来标识，js 中主要是通过 $+编号 或者 \+编号 去引用分组的内容，如下便是一个捕获性分组的例子：

var color = "#808080";
var output = color.replace(/#(\d+)/,"$1"+"~~");// "$1"是反向引用，也可以写成 "$1~~"
// 单独访问变量$1，并输出到控制台
console.log(RegExp.$1);//808080
// 将变量output输出到控制台
console.log(output);//808080~~

说明： 以上正则表达式中的 (\d+) 表示一个捕获性分组，而 $1 则是反向引用，引用分组 (\d+) 捕获到的内容。整个正则表达式 #(\d+) 成功匹配到字符串 #808080。(\d+) 分组捕获到的内容就是 808080，所以由 $1 和 ~~ 组成的替换字符串是 808080~~。因此替换后的结果是 808080~~。

想要单独获取反向引用 $1 的值，可以使用表达式：RegExp.$1，RegExp.$1 指向该分组 (\d+) 捕获到的内容，该分组捕获到的内容就是 808080，所以访问 RegExp.$1 获取到的内容 808080。

$+编号 只能在正则表达式之外使用。

实际上，捕获性分组捕获到的内容不仅可以在正则表达式外部引用，还可以在正则表达式内部引用。

var url = "www.google.google.com";
var re = /([a-z]+)\.\1/;//匹配到 google.google
var output = url.replace(re,"$1");// 将 google.google 替换成 google
console.log(RegExp.$1);
console.log(output);

如上代码，正则式是 ([a-z]+).\1，其中的 \1 就是反向引用，引用谁？引用分组 ([a-z]+)所匹配到的内容。

我们分析下匹配过程：

1. ([a-z]+) 匹配到位置 3 的 . 时失败了，于是成功匹配到字符串 www，接着把控制权给 \.；
2. \. 匹配 . 成功，然后把控制权给 \1；
3. \1 引用了 ([a-z]+) 匹配到的内容，也就是 www，所以就是 www 去匹配后面的字符串，w 匹配 g 失败，整个表达式匹配失败，匹配失败的位置是 0，然后从位置 1 开始第 2 次的迭代匹配；
4. 重复上面的过程，直到第 5 次迭代匹配，从位置 4 开始匹配，([a-z]+) 成功匹配到了 google，\. 成功匹配到了 .，\1 这是引用 google，所以成功匹配了 google，整个正则表达式成功匹配 1 次，接着继续第 6 次迭代匹配失败，第 7 次迭代匹配也失败，最后匹配结束；
5. 最终正则表达式成功匹配了字符串 google.google，开始位置 4，结束位置 17，([a-z]+) 匹配 google，\. 匹配 .，\1 匹配 google；
6. $1 引用的就是 ([a-z]+) 匹配到的内容，即 google，所以源字符串中的 google.google 被替换成 google，最后得到字符串 www.google.com，赋值给变量 output，所以最终输出变量 output 的结果就是 www.google.com。