如何使用正则表达式的捕获组与非捕获组？

网上有很多类似的文章，我为什么还要写呢？是因为我在阅读Vue2.0的代码中发现了
/^\s*([^\s"'<>\/=]+)(?:\s*((?:=))\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ 用别人写的文章去套用的话解释不清，因此我特把此次的正则表达式的学习过程记录下来，以方便后来者能够很快的找到解决问题的答案 。

---

1. 基本定义

什么是捕获组？

捕获组就是把正则表达式中子表达式匹配的内容，保存到内存中以数字编号或显式命名的组里，方便后面引用。当然，这种引用既可以是在正则表达式内部，也可以是在正则表达式外部。一般一个小括号括起来就是一个捕获组。捕获组可以进行嵌套。以深度优先进行编号，在js中编号从1开始。

例如：

var reg=/(2(3)4)(5(6)7)/;
console.log(
    "234567".match(reg)
)

我们可以看到上图中打印的数组，编号如下图：

非捕获组是什么呢？

我的理解是参与匹配却不进行分组编号的捕获组，其形式为（?:exp）组成，还有其他的形式，在此不再描述。

例如：

var reg=/1(?:2)/;
console.log(
    "12".match(reg)
)

由此我们发现非捕获数组进行匹配，但不进行捕获。

2.特殊用法

A. 形如（？：（））

非捕获数组不参与编号分配但参与匹配
非捕获数组不参与编号分配但参与匹配
非捕获数组不参与编号分配但参与匹配
其分组如下：

也就是说exp中按照正常的分组逻辑进行分组

B. 形如（？：（）|（））

严格说这样写是解决选择缓存问题的写法（直接用圆括号会有一个副作用，是相关的匹配会被缓存，此时可用?:放在第一个选项前来消除这种副作用。）
其编号为：

C.形如 （（？：exp））

非捕获数组不参与编号分配但参与匹配
这种写法我认为等价于（exp）
其分组情况为

---

因此文章开头提到的表达式：

生成这张图的地址为：链接