ES (四) 正则的扩展

青旅半醒 2022-11-28 13:29 139阅读 0赞

# 4、正则的扩展 #

*  [1、RegExp 构造函数][1_RegExp]
 *  [2、字符串的正则方法][2]
 *  [3、RegExp 新增属性][3_RegExp]

--------------------

#### [\#][Link 1]一、RegExp 构造函数 ####

在 ES5 中正则表达式的创建有两种方式

*  构造函数，new RegExp(‘xyz’,‘i’); 第一个参数是字符串，第二个参数是修饰符。
 *  第二种直接等于表达式的方式/xyz/i

new RegExp('xyz','i') => /xyz/i

在 ES5 中如果构造函数的第一个参数用表达式，第二个参数用修饰符会报错。

在 ES6 中修改了这种情况，不会报错，而且第二个参数会覆盖表达式中的修饰符。

new RegExp(/xyz/gi, "i").flags; // i

上面代码中，原有正则对象的修饰符是`ig`，它会被第二个参数`i`覆盖。

#### [\#][Link 2]二、字符串的正则方法 ####

字符串对象共有 4 个方法，可以使用正则表达式：match() 、 replace() 、search() 、 和 split()

ES6 中语言内部全部调用 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]`

ES2020 新增 String.prototype.matchAll() 可以一次性取出所有匹配。不过，它返回的是一个遍历器（Iterator），而不是数组。

遍历器的好处是，如果数组很大，遍历器比较节省资源。

遍历器转化成数组也是比较简单的，可以用 for…of 遍历，可以通过`Array.from` 或者`...`运算符转化成数组。

…

ES5 中想要全部匹配需要遍历，不太方便

var str = "美死了！美女";
    var reg = /美/g;
    reg.test(str); // true
    reg.lastIndex; // 1
    reg.test(str); // true
    reg.lastIndex; // 5
    reg.test(str); // false
    reg.lastIndex; // 0

ES6 中字符串新增了 matchAll,返回一个 Iterator 的遍历器，很容易可以得到里面的值

var str = '美死了！美女'
    var reg = /美/g
    const result = str.matchAll(reg)
    result // RegExpStringIterator {}
    [...result]       // [Array(1), Array(1)]
    或者
    Array.from(result) // [Array(1), Array(1)]

#### [\#][Link 3]三、RegExp 新增属性 ####

*  RegExp.prototype.flags 属性， ES6 为正则表达式新增了`flags`属性，会返回正则表达式的修饰符。
 *  新增了 y 修饰符(sticky),和 RegExp.prototype.sticky 属性
 *  为 exec 新增正则匹配索引

[1_RegExp]: https://s2265681.github.io/Guide/Es6/4%E3%80%81%E6%AD%A3%E5%88%99%E7%9A%84%E6%89%A9%E5%B1%95.html#one
[2]: https://s2265681.github.io/Guide/Es6/4%E3%80%81%E6%AD%A3%E5%88%99%E7%9A%84%E6%89%A9%E5%B1%95.html#two
[3_RegExp]: https://s2265681.github.io/Guide/Es6/4%E3%80%81%E6%AD%A3%E5%88%99%E7%9A%84%E6%89%A9%E5%B1%95.html#three
[Link 1]: https://s2265681.github.io/Guide/Es6/4%E3%80%81%E6%AD%A3%E5%88%99%E7%9A%84%E6%89%A9%E5%B1%95.html#%E4%B8%80%E3%80%81regexp-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0
[Link 2]: https://s2265681.github.io/Guide/Es6/4%E3%80%81%E6%AD%A3%E5%88%99%E7%9A%84%E6%89%A9%E5%B1%95.html#%E4%BA%8C%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%AD%A3%E5%88%99%E6%96%B9%E6%B3%95
[Link 3]: https://s2265681.github.io/Guide/Es6/4%E3%80%81%E6%AD%A3%E5%88%99%E7%9A%84%E6%89%A9%E5%B1%95.html#%E4%B8%89%E3%80%81regexp-%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7