ES6 正则的扩展

ES6 正则的扩展

一、RegExp构造函数

//下列是等价的
var regex = new RegExp('xyz','i');//第二个参数表示正则表达式的修饰符(flag)
var regex = /xyz/i;

var regex = new RegExp(/xyz/i);
var regex = /xyz/i;

//错误示例
var regex = new RegExp(/xyz/,'i');
//ES5中不允许使用第二个参数添加修饰符

//ES6
var regex = new RegExp(/abc/ig,'i').flags;
//此处的ig修饰符将会被i取代

二、字符串的正则方法

match()，replace()，search()，split()四种方法。

ES6将这四个方法，在语言内部全部调用RegExp的实例方法，从而做到所有与正则相关的方法，全都定义在RegExp对象上。

• 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]

//例子
var str = "风雨送春归飞雪迎春到，飞雪连天向天横";
var regex = new Regex(/飞雪/g);
var xx = str.match(regex);//xx[0]=xx[1]="飞雪"

三、u修饰符

含义：“Unicode”模式，处理大于/uFFFF的Unicode字符

/^\uD83D/u.test('\uD83D\uDC2A') // false
/^\uD83D/.test('\uD83D\uDC2A') // true

ES5不支持四字节的UTF-16编码，因此会识别为两个字符，返回true

而添加了u修饰符之后，ES6就会识别成一个字符，返回false

添加u修饰符会修改以下正则表达式的行为

1. 点字符

   含义是除了换行符以外的任意单个字符

   var s = '𠮷';
   
   /^.$/.test(s) // false
   /^.$/u.test(s) // true
   

   不添加u修饰符，正则表达式会认为字符串为两个字符，从而匹配失败

   原因：由于这里只识别一个字符，这里不添加u的时候，字符串为两个字符，从开始(^)到结束($)有两个字符，所以识别失败

2. Unicode字符表示法

   ES6新增使用大括号表示Unicode字符，表达式中必须加上u修饰符，才能识别当中的大括号，否则会被解读为量词。

   /\u{61}/.test('a') // false
   /\u{61}/u.test('a') // true
   /\u{20BB7}/u.test('𠮷') // true
   

3. 使用u修饰符后，所有量词都会正确识别码点大于0xFFFF的 Unicode 字符

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

4. 预定义模式

   u修饰符能影响到预定义模式

   /^\S$/.test('𠮷') // false
   /^\S$/u.test('𠮷') // true
   

   \S是预定义模式，匹配所有非空白字符

   应用：

   //返回正确的字符串长度
   function codePointLength(text) {
     var result = text.match(/[\s\S]/gu);
     return result ? result.length : 0;
   }
   
   var s = '𠮷𠮷';
   
   s.length // 4
   codePointLength(s) // 2
   //因为“𠮷”是一个四个字节的UTF-16编码，那么每个“𠮷”将会被识别成两个字符
   

5. i修饰符

   /[a-z]/i.test('\u212A') // false
   /[a-z]/iu.test('\u212A') // true
   

   由于\u004B与\u212A都是大写的K，相类似，不添加u修饰符，就无法识别非规范的K字符，因而识别的时候会出现错误

6. 转义

   没有u修饰符的情况下，正则中没有定义的转义（如逗号的转义\,）无效，而在u模式会报错。

   /\,/ // /\,/
   /\,/u // 报错
   

   注意：逗号不需要转义，因此出现错误（u修饰符处理unicode是对有意义的定义进行转义，转义无效就会报错）

四、RegExp.prototype.unicode属性

unicode属性表示是否设置了u修饰符

const r1 = /hello/;
const r2 = /hello/u;

r1.unicode // false
r2.unicode // true

五、y修饰符

“粘连”(sticky)修饰符

y修饰符的作用与g修饰符相类似，也是全局匹配

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"]
r2.exec(s) // null

g修饰符只要剩余位置存在匹配即可返回值；y修饰符则是确保匹配必须从剩余的第一个位置开始，也就是上面第二次调用r2正则表达式中，剩余的第一个位置是“_”，因此不符合匹配，返回null。

或者采用下面的方法避免此种状况：

var s = 'aaa_aa_a';
var r = /a+_/y;

r.exec(s) // ["aaa_"]
r.exec(s) // ["aa_"]

1. lastIndex属性

   const REGEX = /a/g;
   
   // 指定从2号位置（y）开始匹配
   REGEX.lastIndex = 2;
   
   // 匹配成功
   const match = REGEX.exec('xaya');
   
   // 在3号位置匹配成功
   match.index // 3
   
   // 下一次匹配从4号位开始
   REGEX.lastIndex // 4
   
   // 4号位开始匹配失败
   REGEX.exec('xaya') // null
   

   这里是g修饰符，那么会从开始的位置开始向接下来的后面搜索，若存在则匹配成功（位置下标是从0开始）

   const REGEX = /a/y;
   
   // 指定从2号位置开始匹配
   REGEX.lastIndex = 2;
   
   // 不是粘连，匹配失败
   REGEX.exec('xaya') // null
   
   // 指定从3号位置开始匹配
   REGEX.lastIndex = 3;
   
   // 3号位置是粘连，匹配成功
   const match = REGEX.exec('xaya');
   match.index // 3
   REGEX.lastIndex // 4
   

   这里是y修饰符，y修饰符是从指定位置开始进行搜索，匹配当前位置，如果不匹配就返回null

   y修饰符的设计本意：让头部匹配的标志^在全局匹配中都有

2. y修饰符和g修饰符的搭配

   g是对全局匹配，而y则是对当前的位置进行匹配，那么可以保证逐一进行替换，而发生不匹配则不会再继续进行

   const REGEX = /a/gy;
   'aaxa'.replace(REGEX, '-') // '--xa'
   

   y、g连用可以返回所有匹配

   'a1a2a3'.match(/a\d/y) // ["a1"]
   'a1a2a3'.match(/a\d/gy) // ["a1", "a2", "a3"]
   

   (\d是匹配数字)

   const TOKEN_Y = /\s*(\+|[0-9]+)\s*/y;
   const TOKEN_G  = /\s*(\+|[0-9]+)\s*/g;
   
   tokenize(TOKEN_Y, '3 + 4')
   // [ '3', '+', '4' ]
   tokenize(TOKEN_G, '3 + 4')
   // [ '3', '+', '4' ]
   
   function tokenize(TOKEN_REGEX, str) {
     let result = [];
     let match;
     while (match = TOKEN_REGEX.exec(str)) {
       result.push(match[1]);
     }
     return result;
   }
   //(这里不出现非法字符)
   
   //(这里出现非法字符)
   tokenize(TOKEN_Y, '3x + 4')
   // [ '3' ]
   tokenize(TOKEN_G, '3x + 4')
   // [ '3', '+', '4' ]
   

六、RegExp.prototype.sticky 属性

ES6的正则实例多了sticky属性，表示是否设置了y修饰符

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

七、RegExp.prototype.flags 属性

ES6为正则表达式设置了flags属性，返回正则表达式的修饰符

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

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

八、s 修饰符：dotAll 模式

.代表任意的单个字符，四个字节的UTF-16字符可以用u修饰符解决；而行终止符则不能解决

• U+000A 换行符（\n）
• U+000D 回车符（\r）
• U+2028 行分隔符（line separator）
• U+2029 段分隔符（paragraph separator）

/foo.bar/.test('foo\nbar')
// false

/foo[^]bar/.test('foo\nbar')
// true

s修饰符可以让.匹配到任意单个字符

/foo.bar/s.test('foo\nbar') // true

dotAll属性，返回一个布尔值，表示正则表达式是否处于dotAll模式

const re = /foo.bar/s;
// 另一种写法
// const re = new RegExp('foo.bar', 's');

re.test('foo\nbar') // true
re.dotAll // true
re.flags // 's'

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

九、后行断言

1. 先行断言和先行否定断言

   “先行断言”指的是，x只有在y前面才匹配，必须写成/x(?=y)/

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

   /\d+(?=%)/.exec('100% of US presidents have been male')  // ["100"]
   /\d+(?!%)/.exec('that’s all 44 of them')                 // ["44"]
   

   注意：“先行断言”括号之中的部分（(?=%)）不计入计算结果

2. 后行断言和后行否定断言

   “后行断言”指的是，x只有在y后面才匹配，必须写成/(?<=y)x/

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

   /(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill')  // ["100"]
   /(?<!\$)\d+/.exec('it’s is worth about €90')                // ["90"]
   

   注意：括号之中的部分（(?<=\$)）不计入计算结果

   例子：后行断言进行字符串替换

   const RE_DOLLAR_PREFIX = /(?<=\$)foo/g;
   '$foo %foo foo'.replace(RE_DOLLAR_PREFIX, 'bar');
   // '$bar %foo foo'
   

   操作顺序：先匹配/(?<=y)x/的x，再往左匹配y的部分；以“先右后左”的执行顺序（与其他正则操作相反）

   /(?<=(\d+)(\d+))$/.exec('1053') // ["", "1", "053"]
   /^(\d+)(\d+)$/.exec('1053') // ["1053", "105", "3"]
   

   上面代码中，需要捕捉两个组匹配。没有“后行断言”时，第一个括号是贪婪模式，第二个括号只能捕获一个字符，所以结果是105和3。而“后行断言”时，由于执行顺序是从右到左，第二个括号是贪婪模式，第一个括号只能捕获一个字符，所以结果是1和053。

   这里可以理解为组匹配中，开始执行的括号是贪婪模式，之后的只匹配一个字符；（后行断言是从右往左执行）

   /(?<=(o)d\1)r/.exec('hodor')  // null
   /(?<=\1d(o))r/.exec('hodor')  // ["r", "o"]
   

   后行断言是先从左到右扫描，发现匹配以后再回过头，从右到左完成反斜杠引用。

   第一个null是因为不存在odr这种情况

十、Unicode 属性类

\p{...}和\P{...}，允许正则表达式匹配符合 Unicode 某种属性的所有字符

const regexGreekSymbol = /\p{Script=Greek}/u;
regexGreekSymbol.test('π') // true

\p{Script=Greek}指定匹配一个希腊文字母，所以匹配π成功

Unicode 属性类要指定属性名和属性值

\p{UnicodePropertyName=UnicodePropertyValue}
//某些属性，可以只写属性名，或者只写属性值
\p{UnicodePropertyName}
\p{UnicodePropertyValue}

\P{…}是\p{…}的反向匹配，即匹配不满足条件的字符

注意：这两种类只对Unicode有效，使用的时候必须加上u修饰符，若不添加，在正则表达式使用\p和\P会报错

const regex = /^\p{Decimal_Number}+$/u;
regex.test('𝟏𝟐𝟑𝟜𝟝𝟞𝟩𝟪𝟫𝟬𝟭𝟮𝟯𝟺𝟻𝟼') // true
//属性类指定匹配所有十进制字符

\p{Number}能匹配罗马数字

// 匹配所有数字
const regex = /^\p{Number}+$/u;
regex.test('²³¹¼½¾') // true
regex.test('㉛㉜㉝') // true
regex.test('ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ') // true

// 匹配所有空格
\p{White_Space}

// 匹配各种文字的所有字母，等同于 Unicode 版的 \w
[\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]

// 匹配各种文字的所有非字母的字符，等同于 Unicode 版的 \W
[^\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]

// 匹配 Emoji
/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu

// 匹配所有的箭头字符
const regexArrows = /^\p{Block=Arrows}+$/u;
regexArrows.test('←↑→↓↔↕↖↗↘↙⇏⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇧⇩') // true

十一、具名组匹配

1. 简介

   正则表达式使用圆括号进行组匹配

   const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;
   

   使用exec方法可以将多组匹配结果提取出来

   const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;
   
   const matchObj = RE_DATE.exec('1999-12-31');
   const year = matchObj[1]; // 1999
   const month = matchObj[2]; // 12
   const day = matchObj[3]; // 31
   

   问题：每一组的匹配含义不容易看出来，而且只能用数字序号（比如matchObj[1]）引用，要是组的顺序变了，引用的时候就必须修改序号

   具名组匹配：

   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
   

   注意：**“具名组匹配”**在圆括号内部，模式的头部添加“问号 + 尖括号 + 组名”（?<year>），然后就可以在exec方法返回结果的groups属性上引用该组名。同时，数字序号（matchObj[1]）依然有效

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

   const RE_OPT_A = /^(?<as>a+)?$/;
   const matchObj = RE_OPT_A.exec('');
   
   matchObj.groups.as // undefined
   'as' in matchObj.groups // true
   //具名组as没有找到匹配，那么matchObj.groups.as属性值就是undefined，并且as这个键名在groups是始终存在的
   

解构赋值替换

使用解构赋值直接从匹配结果上为变量赋值

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'

注意：replace方法的第二个参数是一个字符串，而不是正则表达式

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}`;
});

引用

在正则表达式内部引用某个“具名组匹配”，可以使用\k<组名>的写法

const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/;
RE_TWICE.test('abc!abc') // true
RE_TWICE.test('abc!ab') // false

同时数字引用（\1）依然有效（代表第一个匹配项，\2为第二个匹配项）

const RE_TWICE = /^(?<word>[a-z]+)!\1$/;
RE_TWICE.test('abc!abc') // true
RE_TWICE.test('abc!ab') // false

可以同时使用上述两种引用

const RE_TWICE = /^(?<word>[a-z]+)!\k<word>!\1$/;
RE_TWICE.test('abc!abc!abc') // true
RE_TWICE.test('abc!abc!ab') // false

十二、正则匹配索引

正则实例的exec()方法，返回结果有一个index属性，可以获取整个匹配结果的开始位置

为exec()方法的返回结果加上indices属性，在这个属性上面可以拿到匹配的开始位置和结束位置（目的解决包含组匹配而获取的开始位置）

const text = 'zabbcdef';
const re = /ab/;
const result = re.exec(text);

result.index // 1
result.indices // [ [1, 3] ]  //indices属性是一个数组，成员是每个匹配的开始位置和结束位置的数组

注意：开始位置包含在匹配结果之中，但是结束位置不包含在匹配结果之中。比如，匹配结果为ab，分别是原始字符串的第1位和第2位，那么结束位置就是第3位

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

const text = 'zabbcdef';
const re = /ab+(cd)/;
const result = re.exec(text);

result.indices // [ [ 1, 6 ], [ 4, 6 ] ]

注意：这里的+是代表匹配多次b，因而结束位置是6

多组匹配例子：

const text = 'zabbcdef';
const re = /ab+(cd(ef))/;
const result = re.exec(text);

result.indices // [ [1, 8], [4, 8], [6, 8] ]

总结：有n个组匹配，那么就有n+1个成员（一般而言）

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

const text = 'zabbcdef';
const re = /ab+(?<Z>cd)/;
const result = re.exec(text);

result.indices.groups // { Z: [ 4, 6 ] }

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

十三、String.prototype.matchAll()

如果一个正则表达式在字符串里面有多个匹配，现在一般使用g修饰符或y修饰符，在循环里面逐一取出

var regex = /t(e)(st(\d?))/g;
var string = 'test1test2test3';

var matches = [];
var match;
while (match = regex.exec(string)) {
  matches.push(match);
}

matches
// [
//   ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"],
//   ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"],
//   ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]
// ]

ES2020增加了String.prototype.matchAll()方法，可以一次性取出所有匹配（注意：返回的是遍历器Iterator，不是数组；可以用for...of循环取出）

const string = 'test1test2test3';
const regex = /t(e)(st(\d?))/g;

for (const match of string.matchAll(regex)) {
  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"]

遍历器转换为数组：使用...运算符和Array.from()方法

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

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