ES6 正则的扩展

淡淡的烟草味﹌ 2021-06-24 16:11 329阅读 0赞

# RegExp构造函数 #

如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而且，返回的正则表达式会忽略原有的正则表达式的修饰符，只使用新指定的修饰符。  
下面代码中，原有正则对象的修饰符是ig，它会被第二个参数i覆盖。

new RegExp(/abc/ig, 'i').flags
    // "i"

# 字符串的正则方法 #

字符串对象共有4个方法，可以使用正则表达式：**match()、replace()、search()和split()**。  
ES6将这4个方法，在语言内部全部调用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\]

# u修饰符 #

ES6对正则表达式添加了u修饰符，含义为“Unicode模式”，用来正确处理大于\\uFFFF的Unicode字符。即会正确处理四个字节的UTF-16编码。  
下面代码中，\\uD83D\\uDC2A是一个四个字节的UTF-16编码，代表一个字符。但是，ES5不支持四个字节的UTF-16编码，会将其识别为两个字符，导致第二行代码结果为true。加了u修饰符以后，ES6就会识别其为一个字符，所以第一行代码结果为false。

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

一旦加上u修饰符号，就会修改下面这些正则表达式的行为。  
1.点字符  
点（.）字符在正则表达式中，含义是除了换行符以外的任意单个字符。对于码点大于0xFFFF的Unicode字符，点字符不能识别，必须加上u修饰符。  
下面代码表示，如果不添加u修饰符，正则表达式就会认为字符串为两个字符，从而匹配失败。

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

2.Unicode字符表示法  
ES6新增了使用大括号表示Unicode字符，这种表示法在正则表达式中必须加上u修饰符，才能识别。  
下面代码表示，如果不加u修饰符，正则表达式无法识别\\u\{61\}这种表示法，只会认为这匹配61个连续的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

另外，只有在使用u修饰符的情况下，Unicode表达式当中的大括号才会被正确解读，否则会被解读为量词。  
下面代码中，由于正则表达式没有u修饰符，所以大括号被解读为量词。加上u修饰符，就会被解读为Unicode表达式。

/^\u{3}$/.test('uuu') // true

4.预定义模式  
u修饰符也影响到预定义模式，能否正确识别码点大于0xFFFF的Unicode字符。  
下面代码的\\S是预定义模式，匹配所有不是空格的字符。只有加了u修饰符，它才能正确匹配码点大于0xFFFF的Unicode字符。

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

5.i修饰符  
有些Unicode字符的编码不同，但是字型很相近，比如，\\u004B与\\u212A都是大写的K。  
下面代码中，不加u修饰符，就无法识别非规范的K字符。

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

# y修饰符 #

除了u修饰符，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"]
    r2.exec(s) // null

上面代码有两个正则表达式，一个使用g修饰符，另一个使用y修饰符。这两个正则表达式各执行了两次，第一次执行的时候，两者行为相同，剩余字符串都是\_aa\_a。由于g修饰没有位置要求，所以第二次执行会返回结果，而y修饰符要求匹配必须从头部开始，所以返回null。  
如果改一下正则表达式，保证每次都能头部匹配，y修饰符就会返回结果了。  
下面代码每次匹配，都是从剩余字符串的头部开始。

var s = 'aaa_aa_a';
    var r = /a+_/y;
    r.exec(s) // ["aaa_"]
    r.exec(s) // ["aa_"]

# sticky属性 #

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

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

# flags属性 #

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

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

# RegExp.escape() #

字符串必须转义，才能作为正则模式。

function escapeRegExp(str) {
      return str.replace(/[\-\[\]\/\{\}\*\+\?\.\\\^\$\|]/g, '\\$&');
    }
    let str = '/path/to/resource.html?search=query';
    escapeRegExp(str)
    // "\/path\/to\/resource\.html\?search=query"

上面代码中，`str`是一个正常字符串，必须使用反斜杠对其中的特殊字符转义，才能用来作为一个正则匹配的模式。  
已经有提议将这个需求标准化，作为RegExp对象的静态方法RegExp.escape()，放入ES7。2015年7月31日，TC39认为，这个方法有安全风险，又不愿这个方法变得过于复杂，没有同意将其列入ES7，但这不失为一个真实的需求。

RegExp.escape('The Quick Brown Fox');
    // "The Quick Brown Fox"
    RegExp.escape('Buy it. use it. break it. fix it.');
    // "Buy it\. use it\. break it\. fix it\."
    RegExp.escape('(*.*)');
    // "$\*\.\*$"

字符串转义以后，可以使用RegExp构造函数生成正则模式。

var str = 'hello. how are you?';
    var regex = new RegExp(RegExp.escape(str), 'g');
    assert.equal(String(regex), '/hello\. how are you\?/g');

# s修饰符：dotAll 模式 #

正则表达式中，点（.）是一个特殊字符，代表任意的单个字符，但是行终止符（line terminator character）除外。  
以下四个字符属于”行终止符“。  
1.U+000A 换行符（\\n）  
2.U+000D 回车符（\\r）  
3.U+2028 行分隔符（line separator）  
4.U+2029 段分隔符（paragraph separator）  
下面代码中，因为.不匹配\\n，所以正则表达式返回false。

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

但是，很多时候我们希望匹配的是任意单个字符，这时有一种变通的写法，引入/s修饰符，使得.可以匹配任意单个字符。

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

这被称为dotAll模式，即点（dot）代表一切字符。所以，正则表达式还引入了一个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'

# 后行断言 #

JavaScript语言的正则表达式，只支持**先行断言**（lookahead）和**先行否定断言**（negative lookahead），不支持后行断言（lookbehind）和后行否定断言（negative lookbehind）。  
目前，有一个提案，在ES7加入后行断言。V8引擎4.9版已经支持，Chrome浏览器49版打开”experimental JavaScript features“开关（地址栏键入`about:flags`），就可以使用这项功能。  
”先行断言“指的是，`x`只有在`y`前面才匹配，必须写成`/x(?=y)/`。比如，只匹配百分号之前的数字，要写成`/\d+(?=%)/`。”先行否定断言“指的是，`x`只有不在`y`前面才匹配，必须写成`/x(?!y)/`。比如，只匹配不在百分号之前的数字，要写成`/\d+(?!%)/`。

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

上面两个字符串，如果互换正则表达式，就会匹配失败。另外，还可以看到，”先行断言“括号之中的部分（(?=%)），是不计入返回结果的。  
"后行断言"正好与"先行断言"相反，x只有在y后面才匹配，必须写成/(?<=y)x/。比如，只匹配美元符号之后的数字，要写成/(?<=$)\\d+/。”后行否定断言“则与”先行否定断言“相反，x只有不在y后面才匹配，必须写成/(?<!y)x/。比如，只匹配不在美元符号后面的数字，要写成/(?<!$)\\d+/。

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

上面的例子中，"后行断言"的括号之中的部分（(?<=$)），也是不计入返回结果。

# Unicode属性类 #

目前，有一个提案，引入了一种新的类的写法`\p{...}`和`\P{...}`，允许正则表达式匹配符合Unicode某种属性的所有字符。

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

上面代码中，\\p\{Script=Greek\}指定匹配一个希腊文字母，所以匹配π成功。  
Unicode属性类要指定属性名和属性值。

\p{UnicodePropertyName=UnicodePropertyValue}

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

\p{UnicodePropertyName}

\\P\{…\}是\\p\{…\}的反向匹配，即匹配不满足条件的字符。  
注意，这两种类只对Unicode有效，所以使用的时候一定要加上u修饰符。如果不加u修饰符，正则表达式使用\\p和\\P会报错，ECMAScript预留了这两个类。