ES6 中的正则表达式详解-JavaScript中文网-JavaScript教程资源分享门户

正则表达式是一种强大的文本处理工具，它可以用来匹配、查找和替换字符串中的文本。在 ES6 中，正则表达式得到了大幅度的升级，提供了更加强大和灵活的语法和功能。本文将深入探讨 ES6 中正则表达式的新特性和用法，帮助读者更好地理解和应用正则表达式。

1. 新的语法

在 ES6 中，正则表达式的语法得到了一些新的扩展和改进，让我们来看一下它们都是什么。

1.1. Unicode 支持

ES6 中的正则表达式增加了对 Unicode 字符的支持，这使得正则表达式可以更好地处理非 ASCII 字符集的文本。例如，我们可以使用 Unicode 转义序列来匹配特定的 Unicode 字符，如下所示：

/\u{1F600}/g.test('😀') // true

这个正则表达式可以匹配一个笑脸字符，其中 \u{1F600} 是 Unicode 码点的表示方法，对应于笑脸字符的码点。

1.2. y 修饰符

ES6 中新增了 y 修饰符，表示粘连匹配模式。这种模式下，正则表达式会从上一次匹配的结束位置开始匹配，而不是从整个字符串的开头开始匹配。这个特性可以用来匹配连续的文本，如下所示：

const str = 'aabb'
const regex = /a+/y
console.log(regex.exec(str)) // ["aa"]
console.log(regex.exec(str)) // ["aa"]

在上面的例子中，我们定义了一个正则表达式 /a+/y，表示匹配一个或多个连续的 a 字符，并使用 exec 方法执行匹配操作。在第一次调用 exec 方法时，正则表达式从字符串的开头开始匹配，找到了两个连续的 a 字符，返回了一个数组 ["aa"]。在第二次调用 exec 方法时，正则表达式从上一次匹配的结束位置开始匹配，即从字符串的第三个字符开始，但是字符串中的下一个字符是 b，不满足匹配条件，因此返回了 null。

1.3. s 修饰符

ES6 中新增了 s 修饰符，表示单行模式。这种模式下，正则表达式的 . 元字符可以匹配任意字符，包括换行符。这个特性可以用来处理跨行的文本，如下所示：

const str = 'hello\nworld'
const regex = /hello.world/s
console.log(regex.test(str)) // true

在上面的例子中，我们定义了一个正则表达式 /hello.world/s，表示匹配一个 hello 字符后跟任意字符（包括换行符）和一个 world 字符。因为字符串中包含换行符，如果不使用 s 修饰符，则无法匹配成功。

1.4. 其他语法扩展

除了上述三个语法扩展之外，ES6 中还新增了一些其他的语法扩展，如下所示：

u 修饰符：表示使用 Unicode 模式匹配，可以处理 Unicode 字符集的文本。
i 修饰符：表示不区分大小写匹配。
g 修饰符：表示全局匹配模式，可以匹配多个结果。

2. 新的方法

在 ES6 中，正则表达式也新增了一些新的方法，让我们来看一下它们都是什么。

2.1. RegExp.prototype.@@match

ES6 中的正则表达式对象新增了一个 @@match 方法，可以使用它来进行字符串匹配操作。这个方法的用法与 String.prototype.match 方法类似，但是它可以接受一个正则表达式对象作为参数，而不是一个字符串。例如，我们可以使用 @@match 方法来查找字符串中所有的数字，如下所示：

const str = 'a1b2c3d4'
const regex = /\d+/g
console.log(regex[Symbol.match](str)) // ["1", "2", "3", "4"]

在上面的例子中，我们定义了一个正则表达式 /d+/g，表示匹配一个或多个数字，并使用 @@match 方法执行匹配操作。由于 @@match 方法是一个 Symbol 类型的属性，因此需要使用方括号语法来访问。

2.2. RegExp.prototype.@@replace

ES6 中的正则表达式对象还新增了一个 @@replace 方法，可以使用它来进行字符串替换操作。这个方法的用法与 String.prototype.replace 方法类似，但是它可以接受一个正则表达式对象作为参数，而不是一个字符串。例如，我们可以使用 @@replace 方法来将字符串中所有的数字替换为 x 字符，如下所示：

const str = 'a1b2c3d4'
const regex = /\d+/g
console.log(regex[Symbol.replace](str, 'x')) // "axbxcdx"

在上面的例子中，我们定义了一个正则表达式 /d+/g，表示匹配一个或多个数字，并使用 @@replace 方法执行替换操作。由于 @@replace 方法是一个 Symbol 类型的属性，因此需要使用方括号语法来访问。

2.3. RegExp.prototype.@@split

ES6 中的正则表达式对象还新增了一个 @@split 方法，可以使用它来进行字符串分割操作。这个方法的用法与 String.prototype.split 方法类似，但是它可以接受一个正则表达式对象作为参数，而不是一个字符串。例如，我们可以使用 @@split 方法来将字符串中的单词分割出来，如下所示：

const str = 'hello world'
const regex = /\s+/
console.log(regex[Symbol.split](str)) // ["hello", "world"]

在上面的例子中，我们定义了一个正则表达式 /\s+/，表示匹配一个或多个空格字符，并使用 @@split 方法执行分割操作。由于 @@split 方法是一个 Symbol 类型的属性，因此需要使用方括号语法来访问。

3. 示例代码

下面是一些示例代码，演示了 ES6 中正则表达式的新特性和用法。

3.1. 匹配 Emoji 表情

const str = '😀👍👎'
const regex = /\p{Emoji}/gu
console.log(regex.test(str)) // true

在上面的例子中，我们定义了一个正则表达式 /\p{Emoji}/gu，表示匹配所有的 Emoji 表情字符，并使用 test 方法执行匹配操作。由于 u 修饰符是必需的，因此正则表达式才能处理 Unicode 字符集的文本。

3.2. 匹配 URL

const str = 'https://www.example.com/path/to/file.html'
const regex = /^https?:\/\/(\w+\.)+\w{2,}(\/\S*)?$/i
console.log(regex.test(str)) // true

在上面的例子中，我们定义了一个正则表达式 /^https?:\/\/(\w+\.)+\w{2,}(\/\S*)?$/i，表示匹配一个 URL 字符串，并使用 test 方法执行匹配操作。这个正则表达式可以匹配以 http:// 或 https:// 开头，后面跟着一个或多个域名段和一个可选的路径段的字符串。

3.3. 匹配 HTML 标签

const str = '<p class="text">Hello, world!</p>'
const regex = /<([a-z]+)(?:\s+[^>]+)?>(.*?)<\/\1>/i
console.log(regex.test(str)) // true

在上面的例子中，我们定义了一个正则表达式 /<([a-z]+)(?:\s+[^>]+)?>(.*?)<\/\1>/i，表示匹配一个 HTML 标签，并使用 test 方法执行匹配操作。这个正则表达式可以匹配任意标签，包括带有属性和文本内容的标签。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cc48fee46428fe9e56d75f

ES6 中的正则表达式详解