正则表达式中的小括号

2021-03-29  本文已影响0人  黄金原野

(如有错误，欢迎指正)

括号的问题

众所周知，正则表达式的括号大致分为以下几类

{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(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)
上一篇 下一篇

猜你喜欢

热点阅读