正则的扩展

vivien 2024/1/31 JavaScript

# RegExp构造函数

RegExp是一个构造函数，用于创建正则表达式对象。正则表达式是一个用于描述字符串模式的特殊对象，通常用于字符串的匹配、查找和替换操作。

参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）。

var regex = new RegExp('xyz', 'i'); // 等价于  var regex = /xyz/i;

参数是一个正则表示式，这时会返回一个原有正则表达式的拷贝。

var regex = new RegExp(/xyz/i); // 等价于 var regex = /xyz/i;

参数是一个正则对象，可以使用第二个参数指定修饰符。返回的正则表达式会忽略原有的正则表达式的修饰符，只使用新指定的修饰符。

new RegExp(/abc/ig, 'i').flags // "i" 原有正则对象的修饰符是ig，它会被第二个参数i覆盖。

# 字符串的正则方法

ES6之前，正则表达式的方法是定义在全局的String对象上的，而不是在RegExp对象上。字符串对象共有4 个方法，可以使用正则表达式：match()、replace()、search()和split()。这意味着这些方法可以在任何字符串上调用，而不仅仅是正则表达式的结果。

ES6引入了一个新的RegExp对象，并把所有与正则表达式相关的操作都移到了这个对象上。这意味着现在所有的正则表达式方法，包括match(), replace(), search(), 和 split()，都需要在正则表达式对象上调用，而不是在字符串对象上。这种改变有助于提高代码的可读性和可维护性，因为它明确了这些方法是在处理正则表达式，而不是普通的字符串。也使得正则表达式的操作更加一致，因为所有的正则表达式方法现在都定义在同一个对象上。

String.prototype.match 调用 RegExp.prototype[Symbol.match]
String.prototype.replace 调用 RegExp.prototype[Symbol.replace]
String.prototype.search 调用 RegExp.prototype[Symbol.search]
String.prototype.split 调用 RegExp.prototype[Symbol.split]

# u修饰符(末尾添加u)

ES6对正则表达式添加了u修饰符,含义为Unicode 模式，用来正确处理大于\uFFFF的Unicode字符，即会正确处理四个字节的 UTF-16 编码。

点字符(.):识别匹配除了换行符以外的任何单个字符。对于码点大于0xFFFF的Unicode字符，点字符不能识别，必须加上u修饰符。

var s = '𠮷';
/^.$/.test(s) // false 如果不添加u修饰符，正则表达式就会认为字符串为两个字符，匹配失败
/^.$/u.test(s) // true

1
2
3

Unicode 字符表示法:ES6新增使用大括号表示Unicode字符，这种表示法在正则表达式中必须加上u修饰符才能识别当中的大括号，否则会被解读为量词。\uXXXX表示一个四位数的Unicode码点。

/\u{61}/.test('a') // false 如果不加u修饰符，正则表达式无法识别\u{61}这种表示法，只会认为这匹配61个连续的u
/\u{61}/u.test('a') // true
/\u{20BB7}/u.test('𠮷') // true

1
2
3

量词:使用u修饰符后，所有量词都会正确识别码点大于0xFFFF的Unicode字符。用于指定前面的元素(可以是字符、组或模式)出现的次数。例如，*表示前面的元素可以出现零次或多次，+表示前面的元素至少出现一次。

/𠮷{2}/.test('𠮷𠮷') // false
/𠮷{2}/u.test('𠮷𠮷') // true

1
2

预定义模式:正则表达式中有一些预定义的字符集或模式，如\d代表数字，\w代表单词字符，\s代表空白字符，\S代表非空白字符等。u修饰符也影响到预定义模式能否正确识别码点大于0xFFFF的Unicode字符。

/^\S$/.test('𠮷') // false
/^\S$/u.test('𠮷') // true //加了u修饰符，它才能正确匹配码点大于0xFFFF的Unicode字符
//利用这一点，可以写出一个正确返回字符串长度的函数
function codePointLength(text) {
  var result = text.match(/[\s\S]/gu);
  return result ? result.length : 0;
}
var s = '𠮷𠮷';
s.length // 4
codePointLength(s) // 2

1
2
3
4
5
6
7
8
9
10

i 修饰符:许多正则表达式实现中表示不区分大小写模式，意味着匹配将不区分大小写。有些Unicode字符的编码不同但是字型很相近，比如\u004B与\u212A都是大写的K。不加u修饰符，就无法识别非规范的K字符。

/[a-z]/i.test('\u212A') // false
/[a-z]/iu.test('\u212A') // true 使用u修饰符来明确指定正在处理的是Unicode字符串

1
2

转义:在正则表达式中，有些字符有特殊的意义。为了表示这些字符的字面值，我们需要使用反斜杠 \ 进行转义。例如，要匹配字面上的点字符.，我们需要使用.。没有u修饰符的情况下，正则中没有定义的转义(如逗号的转义,)无效，而在u模式会报错。

/\,/      
// /\,/ 在非Unicode字符串中使用\,时，会将其解释为两个独立的字符，而不是一个逗号。
//因此，正则表达式/\,/实际上是匹配两个字符：反斜杠和逗号。应该使用正则表达式/\\,/来匹配逗号。
/\,/u      
// 报错 在Unicode字符串中使用u/\,/时，会尝试将其解释为Unicode字符。
//但由于逗号不是一个有效的Unicode字符，所以会报错。

1
2
3
4
5
6

如果要在正则表达式中使用逗号作为特殊字符，请确保在非Unicode字符串中使用双反斜杠进行转义，或者在Unicode字符串中使用有效的Unicode转义序列来表示该字符。

# RegExp.prototype.unicode 属性

一个布尔属性，它决定了正则表达式是否应将字符视为Unicode字符，表示是否设置了u修饰符。当unicode属性为true时，正则表达式会以Unicode模式进行匹配，将字符视为Unicode码位，而不是它们的字符表示。

const r1 = /hello/;
const r2 = /hello/u;
r1.unicode // false
r2.unicode // true

1
2
3
4

# y修饰符

ES6为正则表达式添加了y修饰符，叫做粘连(sticky)修饰符。 y修饰符的作用与g修饰符类似，也是**全局匹配******，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。

var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;
// 第一次执行的时候，两者行为相同
r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]
// 每次匹配，都是从剩余字符串的头部开始
r1.exec(s) // ["aa"] //由于g修饰没有位置要求，所以第二次执行会返回结果，
r2.exec(s) // null //y修饰符要求匹配必须从头部开始，所以二次执行返回null。

1
2
3
4
5
6
7
8
9

实际上，y修饰符号隐含了头部匹配的标志^。y修饰符的设计本意，就是让头部匹配的标志^在全局匹配中都有效。

const REGEX = /a/gy;
'aaxa'.replace(REGEX, '-') // '--xa' 最后一个a不是出现在下一次匹配的头部，所以不会被替换

1
2

单单一个y修饰符对match方法，只能返回第一个匹配，必须与g修饰符联用才能返回所有匹配。

'a1a2a3'.match(/a\d/y) // ["a1"]  只想返回第一个匹配，不需要使用g修饰符
'a1a2a3'.match(/a\d/gy) // ["a1", "a2", "a3"]  想返回所有匹配，需要与g修饰符一起使用

1
2

y修饰符的一个应用是从字符串提取token(词元)，y修饰符确保了匹配之间不会有漏掉的字符。

使用粘性修饰符时，正则表达式会尽可能多地匹配字符，直到达到边界条件，这有助于确保在匹配过程中不会漏掉任何字符。

g修饰符（全局匹配）的作用是使正则表达式在匹配过程中忽略非法字符。
y修饰符（粘性匹配）的作用是使正则表达式具有粘性或贪婪的特性。
g修饰符会忽略非法字符，而y修饰符不会。使用g修饰符可以帮助我们在匹配过程中更容易地发现并处理错误，因为它会忽略非法字符。而使用y修饰符时，我们需要注意非法字符的影响，因为它不会忽略它们。

# RegExp.prototype.sticky 属性

与y修饰符相匹配，ES6的正则实例对象多了sticky属性，表示是否设置了y修饰符。

var r = /hello\d/y;
r.sticky // true

1
2

# RegExp.prototype.flags 属性

ES6 为正则表达式新增了flags属性，会返回正则表达式的修饰符。

// ES5 的 source 属性
// 返回正则表达式的正文
/abc/ig.source
// "abc"

// ES6 的 flags 属性
// 返回正则表达式的修饰符
/abc/ig.flags
// 'gi'

1
2
3
4
5
6
7
8
9

# s修饰符：dotAll 模式

s修饰符（也称为dotAll模式，即点(dot)代表一切字符）是一个特殊的修饰符，用于更改点（.）字符的行为。默认情况下，点（.）字符匹配除了换行符（\n）之外的任何单个字符。但是，当使用s修饰符时，点（.）字符将可以匹配任意单个字符。

// 使用没有s修饰符的匹配  
/foo.bar/.test('foo\nbar')  // 输出: false  
// 使用s修饰符的匹配  
/foo.bar/s.test('foo\nbar')  // 输出: true

1
2
3
4

正则表达式引入了一个dotAll属性，返回一个布尔值，表示该正则表达式是否处在dotAll模式。

/s修饰符和多行修饰符/m不冲突，两者一起使用的情况下，.匹配所有字符，而^和$匹配每一行的行首和行尾。

const re = /foo.bar/s; // 另一种写法 const re = new RegExp('foo.bar', 's');
re.test('foo\nbar') // true
re.dotAll // true
re.flags // 's'

1
2
3
4

# 后行断言

“先行断言”指的是，x只有在y前面才匹配，必须写成**/x(?=y)/*****。“先行否定断言”指的是，x只有不在y前面才匹配，必须写成*/x(?!y)/******。
“后行断言”指的是，x只有在y后面才匹配，必须写成**/(?<=y)x/*****。“后行否定断言”指的是，x只有不在y后面才匹配，必须写成*/(?<!y)x/******。

“后行断言”的实现，需要先匹配/(?<=y)x/的x，然后再回到左边，匹配y的部分。这种“先右后左”的执行顺序，与所有其他正则操作相反，导致了一些不符合预期的行为。

首先，后行断言的组匹配与正常情况下结果是不一样的。

/(?<=(\d+)(\d+))$/.exec('1053') // ["", "1", "053"]
/^(\d+)(\d+)$/.exec('1053') // ["1053", "105", "3"]
//没有“后行断言”时，第一个括号是贪婪模式，第二个括号只能捕获一个字符，所以结果是105和3。
//而“后行断言”时，由于执行顺序是从右到左，第二个括号是贪婪模式，第一个括号只能捕获一个字符，所以结果是1和053。

1
2
3
4

当没有后行断言或否定后行断言时，括号内的模式按照贪婪模式进行匹配。这意味着它会尽可能多地匹配字符。首先尝试匹配尽可能多的数字作为一个整体，再匹配尽可能多的数字作为第二个分组。当使用后行断言时，正则表达式会尝试匹配一个模式，但并不消耗字符（也就是说，它只是检查是否存在这样的模式，而不将其包含在匹配结果中）。在这种情况下，第二个括号内的模式会首先尝试匹配尽可能多的数字。

其次，“后行断言”的反斜杠引用，也与通常的顺序相反，必须放在对应的那个括号之前。

/(?<=(o)d\1)r/.exec('hodor')  // null  如果后行断言的反斜杠引用（\1）放在括号的后面就不会得到匹配结果，必须放在前面才可以，
/(?<=\1d(o))r/.exec('hodor')  // ["r", "o"]  因为后行断言是先从左到右扫描，发现匹配以后再回过头，从右到左完成反斜杠引用。

1
2

# Unicode属性类

ES2018引入了Unicode属性类，允许使用**\p{...}****和*\P{...}***(\P是\p的否定形式)代表一类Unicode字符。*\p{...}*** 用于匹配满足条件的所有Unicode字符，而 *\P{...}***** 是其否定形式，用于匹配不满足条件的Unicode字符。这些Unicode属性类非常有用，因为它们允许你根据字符的Unicode属性(如字母、数字、标点符号等)来进行匹配，而不仅仅是基于字符的码位或字面值。

Unicode属性类的标准形式需要同时指定属性名和属性值。

\p{UnicodePropertyName=UnicodePropertyValue}

对于某些属性，可以只写属性名，或者只写属性值。

\p{UnicodePropertyName}
\p{UnicodePropertyValue}

1
2

\P{…}是\p{…}中，注意，这两种类只对Unicode有效，所以使用的时候一定要加上u修饰符。如果不加u修饰符，正则表达式使用\p和\P会报错。
由于 Unicode 的各种属性非常多，所以这种新的类的表达能力非常强。
- \p{Letter}: 匹配任何字母字符。
- \p{Mark}: 匹配任何标记字符，如连字、重音符号等。
- \p{Number}: 匹配任何数字字符，包括阿拉伯数字、罗马数字和其他数字系统。
- \p{Punctuation}: 匹配任何标点符号。
- \p{Symbol}: 匹配任何符号，如数学符号、货币符号等。
- \p{Separator}: 匹配任何分隔符，如空格、制表符、换行符等。
- \p{Other}: 匹配任何其他类型的字符。
- \p{White_Space}: 匹配任何空白字符，如空格、制表符、换行符等。
- \p{Uppercase}: 匹配任何大写字母。
- \p{Lowercase}: 匹配任何小写字母。
- \p{Titlecase}: 匹配任何标题字母。
- \p{Modifier}: 匹配任何修饰符字符，如重音符号、音标符号等。
- \p{Nonspacing}: 匹配任何非间距字符，如连字、组合标记等。
- \p{Math}: 匹配任何数学字符，如数学符号、运算符等。
- \p{Emoji}: 匹配任何表情符号。
- \p{Emoji_Presentation}: 匹配任何表情符号表示形式。
- \p{Emoji_Modifier}: 匹配任何表情符号修饰符。
- \p{Emoji_Component}: 匹配任何表情符号组件。

# v修饰符：Unicode属性类的运算(开头添加v)

v修饰符实际上ES202中引入的新特性，被称为“属性转义”修饰符。它的作用是允许在正则表达式中使用属性转义，使得正则表达式能够匹配Unicode属性。它提供两种形式的运算，一种是差集运算(A集合减去B集合)，另一种是交集运算(A与B的交集)。

[A--B] // 差集运算（A减去B）
[A&&B] // 交集运算（A与B的交集）
上面两种写法中，A和B要么是字符类（例如[a-z]），要么是Unicode属性类（例如\p{ASCII}）。

1
2
3

而且，这种运算支持方括号之中嵌入方括号，即方括号的嵌套。

[A--[0-9]]  // 方括号嵌套的例子

这种运算的前提是，正则表达式必须使用新引入的v修饰符。前面说过，Unicode属性类必须搭配u修饰符使用，这个v修饰符等于代替u，使用了它就不必再写u了。

[\p{Decimal_Number}--[0-9]]  // 十进制字符去除 ASCII 码的0到9
[\p{Emoji}--\p{ASCII}]  // Emoji 字符去除 ASCII 码字符

1
2

请注意，v修饰符仅适用于属性转义，不适用于其他正则表达式的语法。同时，如果你想在整个正则表达式中使用Unicode模式，你仍然需要使用u修饰符。

总结来说，v修饰符主要用于属性转义，以匹配特定的Unicode字符或字符集；而u修饰符则是用于整个正则表达式的Unicode模式，允许你匹配任何Unicode字符。

# 具名组匹配

以前，正则表达式使用圆括号进行组匹配。组匹配的一个问题是，每一组的匹配含义不容易看出来，而且只能用数字序号(比如matchObj[1])引用，要是组的顺序变了，引用的时候就必须修改序号。

ES2018引入了具名组匹配(Named Capture Groups)，允许为每一个组匹配指定一个名字，既便于阅读代码，又便于引用。具名组匹配等于为每一组匹配加上了 ID，便于描述匹配的目的。如果组的顺序变了，也不用改变匹配后的处理代码。

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // "1999"
const month = matchObj.groups.month; // "12"
const day = matchObj.groups.day; // "31"

1
2
3
4
5
6

如果具名组没有匹配，那么对应的groups对象属性会是undefined。

const RE_OPT_A = /^(?<as>a+)?$/;
const matchObj = RE_OPT_A.exec('');

matchObj.groups.as // undefined 具名组as没有找到匹配，matchObj.groups.as属性值是undefined
'as' in matchObj.groups // true as这个键名在groups是始终存在的

1
2
3
4
5

# 解构赋值和替换

有了具名组匹配以后，可使用解构赋值直接从匹配结果上为变量赋值。字符串替换时，用$<组名>引用具名组。

let {groups: {one, two}} = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar');
one  // foo
two  // bar
let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
'2015-01-02'.replace(re, '$<day>/$<month>/$<year>') //第二个参数是一个字符串,不是正则表达式
// '02/01/2015'

1
2
3
4
5
6

replace方法的第二个参数也可以是函数。具名组匹配在原来的基础上新增了最后一个函数参数：具名组构成的一个对象。函数内部可以直接对这个对象进行解构赋值。

'2015-01-02'.replace(re, (
   matched, // 整个匹配结果 2015-01-02
   capture1, // 第一个组匹配 2015
   capture2, // 第二个组匹配 01
   capture3, // 第三个组匹配 02
   position, // 匹配开始的位置 0
   S, // 原字符串 2015-01-02
   groups // 具名组构成的一个对象{year, month, day}，包含所有具名组的匹配结果
 ) => {
 let {day, month, year} = groups;
 return `${day}/${month}/${year}`;
});

1
2
3
4
5
6
7
8
9
10
11
12

# 引用

具名引用：如果要在正则表达式内部引用某个"具名组匹配"，可以使用\k<组名>的写法。
数字引用：数字引用(\1)依然有效。通过在匹配的组后面加上数字来引用它们，数字引用的顺序基于组的出现顺序。

const RE_TWICE = /^(?<word>[a-z]+)!\k<word>!\1$/; //这两种引用语法还可以同时使用
RE_TWICE.test('abc!abc!abc') // true
RE_TWICE.test('abc!abc!ab') // false

1
2
3

# d修饰符：正则匹配索引

ES2022新增了d修饰符，这个修饰符可以让exec()、match()的返回结果添加indices属性，在该属性上面可以拿到匹配的开始位置和结束位置。(该属性是一个数组，它的每个成员还是一个数组，包含了匹配结果在原始字符串的开始位置和结束位置。)

const text = 'zabbcdef';
const re = /ab/d;  //正则表达式re有d修饰符，result现在就会多出一个indices属性
const result = re.exec(text);
result.index // 1
result.indices // [ [1, 3] ]
//由于这里的re不含组匹配，所以indices数组只有一个成员，表示整个匹配的开始位置是1，结束位置是3。

1
2
3
4
5
6

注意，开始位置包含在匹配结果中，相当于匹配结果的第一个字符的位置。但是，结束位置不包含在匹配结果中，而是匹配结果的下一个字符。比如，上例匹配结果的最后一个字符b的位置，是原始字符串的2号位，那么结束位置3就是下一个字符的位置。

如果正则表达式包含组匹配，那么indices属性对应的数组就会包含多个成员，提供每个组匹配的开始位置和结束位置。

const text = 'zabbcdef';
const re = /ab+(cd(ef))/d;
const result = re.exec(text);
result.indices // [ [1, 8], [4, 8], [6, 8] ]
//上面例子中，正则表达式re包含一个组匹配(cd)，那么indices属性数组就有两个成员，
//第一个成员是整个匹配结果(abbcd)的开始位置和结束位置，第二个成员是组匹配(cd)的开始位置和结束位置。
const text = 'zabbcdef';
const re = /ab+(cd(ef))/d;
const result = re.exec(text);
result.indices // [ [1, 8], [4, 8], [6, 8] ]
//上面例子中，正则表达式re包含两个组匹配，所以indices属性数组就有三个成员。

1
2
3
4
5
6
7
8
9
10
11

如果正则表达式包含具名组匹配，indices属性数组还会有一个groups属性。该属性是一个对象，可以从该对象获取具名组匹配的开始位置和结束位置。

const text = 'zabbcdef';
const re = /ab+(?<Z>cd)/d;
const result = re.exec(text);             //exec()方法返回结果的
result.indices.groups // { Z: [ 4, 6 ] }  indices.groups属性是一个对象，提供具名组匹配Z的开始位置和结束位置。

1
2
3
4

如果获取组匹配不成功，indices属性数组的对应成员则为undefined，indices.groups属性对象的对应成员也是undefined。

const text = 'zabbcdef';
const re = /ab+(?<Z>ce)?/d;
const result = re.exec(text);
result.indices[1] // undefined             //由于组匹配ce不成功，所以indices属性数组
result.indices.groups['Z'] // undefined    和indices.groups属性对象对应的组匹配成员Z都是undefined

1
2
3
4
5

# String.prototype.matchAll()

以往，如果一个正则表达式在字符串里面有多个匹配，一般使用g修饰符或y修饰符，在循环里面逐一取出。ES2020增加了String.prototype.matchAll()方法，可以一次性取出所有匹配，它返回的是一个遍历器(Iterator)，而不是数组。

const string = 'test1test2test3';
const regex = /t(e)(st(\d?))/g;
for (const match of string.matchAll(regex)) {//string.matchAll(regex)返回的是遍历器，可用for...of循环取出
  console.log(match);
}
// ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"]
// ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"]
// ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]

1
2
3
4
5
6
7
8

遍历器转为数组是非常简单的，使用...运算符和Array.from()方法就可以了。

// 转为数组的方法一
[...string.matchAll(regex)]
// 转为数组的方法二
Array.from(string.matchAll(regex))

1
2
3
4

字符串的新增方法数值的扩展

Vivien's Notebook

Choose mode