正则表达式在前端开发中，使用频率不怎么频繁，许多人都不怎么重视；只有在需要用的时候会去脑补一下，或者直接网上搜索一下，能用就OK。特别是当要获取字符串中某些内容的时候，往往只知道使用match方法，但是对match方法捕获组中的数组下标0、1、2、3分别是怎么来的，什么时候有1、有2、有3，往往不知其来由。

圆括号在正则表达式中被称为捕获括号

在正则表达式中，带圆括号的字符有以下：

字符	描述
(x)	捕获括号；匹配x并且记住匹配项
(?<name>x)	命名捕获括号；匹配x并且记住匹配项,且在捕获组的groups对象的name里记录捕获的内容
(?:x)	非捕获括号；匹配x但不记住匹配项
x(?=y)	先行断言；匹配x且后面跟着y
(?<=y)x	后行断言；匹配x且前面跟着y
x(?!y)	正向否定查找；匹配x且后面不能是y
(?<!y)x	反向否定查询；匹配x且前面不能是y

在上面的正则字符中，只有(x)捕获括号和命名捕获括号(?<name>x)会记住匹配项，其中匹配项就记录在捕获组中

match方法中捕获组下标0、1、2的来源

例1、先看一下没有捕获括号的match，看看返回结果是啥

var str = 'style="font-size: 12px"'
var regex = /font-size:\s*\w+;?/
str.match(regex)
结果：
['font-size: 12px', index: 7, input: 'style="font-size: 12px"', groups: undefined]

例2、再来看一个带有捕获括号的match:

var str = 'style="font-size: 12px"'
var regex = /font-size:\s*((\d+)|(\w+));?/
str.match(regex)
结果：
['font-size: 12', '12', '12', undefined, index: 7, input: 'style="font-size: 12px"', groups: undefined]

例3、再来看一个带有全局标志的match:

var str = 'style="font-size: 12px"'
var regex = /(?<=font-size:\s*)((\d+)|(\w+));?/g
str.match(regex)
结果:
['12']

从上面的例子中可以得知：
当match匹配成功的时，捕获组的长度是随正则表达中包含捕获括号的数量增加而增加的;
捕获组中第一个元素为匹配的结果，如果正则中包含有捕获组符号，则捕获的内容在第一元素后增加。

p0: 为匹配结果
p1....p(n): 正则捕获括号捕获的内容，有n个捕获括号则生成n个捕获内容，如果捕获括号没有捕获的内容，则内容为undefined
index: 为匹配开始的位置
input: 为匹配的字符串
groups: 为命名捕获组对象，如果没有命名捕获组，则为undefined

你学废了没

注意： 在match方法里，如果正则表达式带有全局(g)标志，则只返回匹配结果，不会返回捕获组