(如有错误，欢迎指正)
括号的问题
众所周知，正则表达式的括号大致分为以下几类
{m, n} -> 匹配出现的次数 /a{1,3}/
[abc], [a-z] -> 匹配abc, a-z中的任意一个字符
(ab) -> 分组 /(ab)+/匹配一个或者多个连续的ab
看起来很容易，用起来很复杂。
尤其是当()承担着更多复杂含义的时候：分组和捕获
简单来说，分组指匹配若干个连续字符: [a-z]只能匹配一个a-z中的任意一个字符，但(abcdefg)匹配的是abcdefg。捕获指获取到字符串匹配正则表达式的()中的部分。对于/\d+(\w+)/与123abc，捕获可以简单理解为abc
小括号之反向引用
正则表达式中最复杂的术语是反向引用，反向引用可以引用正则中定义的捕获。
现在只需要把捕获看着待匹配的字符串，也就是前面匹配的字符串。
反向引用分组中捕获的内容，使用反斜杠加上数字表示引用，该数字从1开始，
第一个分组捕获的为\1,第二个为\2
——《JavaScript忍者秘籍》
自然是看不懂的，好在后面举了🌰
例如^([dtn])a\1，匹配任意从d或t或n开始的，连续有a的字符串，连续匹配第一个分组中捕获的内容。
后面这一点很重要！
这与/[dtn] a[dtn]/不同。a字符之前不能是d或t或n，必须是之前匹配时的字母。
因此，字符\1表示直到相等才匹配。
——《JavaScript忍者秘籍》
果然，还是看不懂，甚至连这个正则表达式想干什么都看不明白，这就需要来测试一下给的例子了。
let reg = /^([dtn])a\1/
let result = reg.test('da') // false
let result = reg.test('ta') // false
let result = reg.test('na') // false
let result = reg.test('nata') // false
let result = reg.test('dada') // true
终于有一个是true了，果然dada是一个令人开心的东西……
根据dada，再回头看这个正则表达式，^表示开头，()表示分组匹配，[]表示dtn三者选其一，\1是表示相等，这个相等针对的是()中的字符，本例中指a前面的字符，此时a前面的字符是d，那么\1就指代d
多试几个
let result = reg.test('dad') // true
let result = reg.test('dan') // false
let result = reg.test('daaaada') // false
let result = reg.test('dadiuiwec') // true
此时再回过头去看前面的定义，似乎有些理解了。撇开“反向引用”这个术语不谈，将待匹配的字符串记为S，\1表示与S相等才进行匹配
理解了\1,\2也就容易理解了
\1,\2只表示需要它们出现的位置，与中间有没有分组关系不大
let reg = /^([dtn])a\1([mk])o\2/
let result = reg.test('dadmom') // true
let reg = /^([dtn])a([mk])o\1\2/
let result = reg.test('damodm') // true
反向引用适合用在HTML标签的匹配上，例如
/<(\w+)>(.+)<\/\1>/
let reg = /<(\w+)>(.+)<\/\1>/
let str = '<html>hello<title>world</title></html>'
let result = reg.test(str) // true
let str = '<html>hello</html>'
let result = reg.test(str) // true
小括号之捕获
捕获可以简单理解为 正则表达式匹配到的内容
简单捕获
先看一个正则表达式
let reg = /translateY\(([^\)]+)\)/
看起来挺复杂，掐头去尾之后就简单了
- translateY就是translateY，固定内容
-
\( \)表示左括号和右括号本身 - 现在就剩下
([^\)]+) -
()表示分组匹配。需要捕获其中的内容 - 现在剩下
[^\)]+ -
[]+表示满足[]中的元素出现一次以上 - 现在还剩下
^\) -
^不在开头表示非，\)表示右括号本身，即非右括号的字符，或者说，右括号出现之前的字符
综上，这一正则表达式捕获的内容是translateY(XXX)中的XXX，其中XXX不能包含右括号，若干包含，即为右括号前面的字符。
let reg = /translateY\(([^\)]+)\)/
let str = 'translateY(15px)'
let match = str.match(reg)
输出的match为
[
'translateY(15px)',
'15px',
index: 0,
input: 'translateY(15px)',
groups: undefined
]
match方法匹配结果通过第一个索引返回
每次捕获的结果依次递增，满足条件的值存储在match[1]的位置处（如果有多个会放在match[2]...中）
若str = 'translateY(15p)x)'，则match[1]为15p
匹配的结果指满足正则表达式要求的完整字符串，它可以是给定的字符串也可以是给定字符串的一部分。
捕获即为满足()内条件的字符串。
（虽然不一定十分准确，但暂时应该可以这么理解)
全局表达式进行匹配
当使用全局正则表达式时，会返回全部匹配的结果，但不会返回捕获结果
// 匹配一个html标签
let html = "<div class='test'><b>Hello</b><i>World</i></div>"
let reg = /<(\/?)(\w+)([^>]*)>/
let result = html.match(reg)
输出的结果为
[
"<div class='test'>",
'',
'div',
" class='test'",
index: 0,
input: "<div class='test'><b>Hello</b><i>World</i></div>",
groups: undefined
]
可以看出，有3个待匹配的捕获，在match的1-3位输出，match[0]则是第一个满足正则表达式条件的字符串。
注意此时的正则表达式并非全部匹配（没有/g）
如果换成全局匹配，正则表达式后加一个g
let html = "<div class='test'><b>Hello</b><i>World</i></div>"
let reg = /<(\/?)(\w+)([^>]*)>/g
let result = html.match(reg)
console.log(result)
输出的结果为
[ "<div class='test'>", '<b>', '</b>', '<i>', '</i>', '</div>' ]
可以看到，只有匹配的结果（满足正则表达式的字符串），没有捕获的结果（满足每一个分组正则表达式的字符串）
如果需要捕获的结果，需要用到exec方法
let html = "<div class='test'><b>Hello</b><i>World</i></div>"
let reg = /<(\/?)(\w+)([^>]*?)>/g
let match, num = 0
while((match = reg.exec(html)) !== null) {
console.log(match)
num++
}
console.log(num)
输出的是,可以看到输出了每一个捕获
[
"<div class='test'>",
'',
'div',
" class='test'",
index: 0,
input: "<div class='test'><b>Hello</b><i>World</i></div>",
groups: undefined
]
[
'<b>',
'',
'b',
'',
index: 18,
input: "<div class='test'><b>Hello</b><i>World</i></div>",
groups: undefined
]
[
'</b>',
'/',
'b',
'',
index: 26,
input: "<div class='test'><b>Hello</b><i>World</i></div>",
groups: undefined
]
[
'<i>',
'',
'i',
'',
index: 30,
input: "<div class='test'><b>Hello</b><i>World</i></div>",
groups: undefined
]
[
'</i>',
'/',
'i',
'',
index: 38,
input: "<div class='test'><b>Hello</b><i>World</i></div>",
groups: undefined
]
[
'</div>',
'/',
'div',
'',
index: 42,
input: "<div class='test'><b>Hello</b><i>World</i></div>",
groups: undefined
]
6
捕获序号
用$1, $2, $3表示
示例表示将大写字母替换为-小写
let str = 'fontFamily'
str = str.replace(/([A-Z])/g, '-$1').toLowerCase()
console.log(str)
// font-family
一个小小的总结
正则表达式涉及到三个方法，用reg表示正则表达式，str表示待匹配的字符串
// 输出true false
reg.test(str)
// 输出具体信息
str.match(reg)
// 全局表达式输出详细捕获
reg.exec(str)
// 替换
str.replace(reg, str1)
