正则表达式是前端开发中非常重要的一部分，它可以帮助我们快速有效地处理字符串。在 ES12 中，正则表达式得到了一些增强，包括新的功能和语法改进。在本文中，我们将深入探讨这些增强，并提供一些示例代码来帮助您更好地理解。
新功能
1. 命名捕获组
命名捕获组是一种新的正则表达式功能，它允许我们为捕获组指定一个名称。这使得我们可以更方便地引用捕获组，而不必依赖于它们的位置。
例如，假设我们有一个字符串，其中包含电子邮件地址和电话号码。我们可以使用以下正则表达式来匹配它们：
----- ----- - ------------------------------------- ----- --- - --- ----- -- ---------------- --- -- ----- ------ -- -------------- ----- ------- - ----------------- ------------------------ -- ------------------ ------------------------ -- --------------
在这个例子中，我们使用了两个捕获组来匹配电子邮件地址和电话号码。我们可以通过 matches[1] 和 matches[2] 来引用它们。
但是，如果我们有很多捕获组，那么这种方式就会变得很麻烦。在这种情况下，我们可以使用命名捕获组来为每个捕获组指定一个名称。以下是相同的示例，但使用了命名捕获组：
----- ----- - ----------------------------------------------------- ----- --- - --- ----- -- ---------------- --- -- ----- ------ -- -------------- ----- ------- - ----------------- ---------------------------------- -- ------------------ ---------------------------------- -- --------------
在这个例子中，我们使用了 (?<name>...) 的语法来为捕获组指定名称。我们可以通过 matches.groups.name 来引用它们。
2. s 修饰符
在 ES12 中，正则表达式新增了一个 s 修饰符，它使 . 元字符可以匹配任何字符，包括换行符。在之前的版本中，. 元字符只能匹配除了换行符以外的任何字符。
例如，假设我们有一个多行字符串，其中包含一些 HTML 代码。我们可以使用以下正则表达式来匹配它们：
----- ----- - ------------- ----- --- - ----------------------------- ----- ----- - ----------------- ---------------------- -- ----------------------------
在这个例子中，我们使用 .* 来匹配两个 <p> 标签之间的文本。但是，由于这是一个多行字符串，所以这个正则表达式只会匹配第一个 <p> 标签和最后一个 </p> 标签之间的文本。
如果我们使用 s 修饰符，那么 . 元字符将可以匹配换行符，因此我们可以匹配多行的 HTML 代码。以下是相同的示例，但使用了 s 修饰符：
----- ----- - -------------- ----- --- - ----------------------------- ----- ----- - ----------------- ---------------------- -- ----------------------------
3. 零宽度断言
零宽度断言是一种新的正则表达式功能，它允许我们在匹配字符串时指定一个位置，而不是一个具体的字符。它们被称为“零宽度”，因为它们不会消耗任何字符，也不会将它们包含在匹配的结果中。
在 ES12 中，正则表达式新增了四种零宽度断言：
(?=...)正向先行断言，匹配后面紧跟的内容。(?<=...)正向后行断言，匹配前面紧跟的内容。(?!...)负向先行断言，匹配后面不紧跟的内容。(?<!...)负向后行断言，匹配前面不紧跟的内容。
例如，假设我们有一个字符串，其中包含一些 URL 地址。我们可以使用以下正则表达式来匹配它们：
----- ----- - ----------------------- ----- --- - ------ -- ------- -- ----------------------- -- -- ---- -- ------------------------- ----- ------- - ----------------- --------------------- -- --------------------------- --------------------------
在这个例子中，我们使用了一个正则表达式来匹配 HTTP 和 HTTPS URL。但是，这个正则表达式也会匹配一些不是 URL 的字符串，例如 http://example.com/foo。为了排除这些字符串，我们可以使用零宽度断言来检查 URL 是否出现在单词边界上。以下是相同的示例，但使用了零宽度断言：
----- ----- - ------------------------------------ ----- --- - ------ -- ------- -- ----------------------- -- -- ---- -- ------------------------- ----- ------- - ----------------- --------------------- -- --------------------------- --------------------------
在这个例子中，我们使用了 (?<=\b) 和 (?=\b) 来指定 URL 必须出现在单词边界上。这样，我们就可以排除那些不是 URL 的字符串。
语法改进
除了新增的功能之外，ES12 还对正则表达式的语法进行了改进。以下是一些主要的改进：
1. | 的优先级
在之前的版本中，| 的优先级比大多数其他操作符都要低。这意味着，在一个正则表达式中使用 | 时，需要使用括号来明确优先级。
例如，假设我们有一个正则表达式，它应该匹配 foo 或 bar，后面跟着 baz。在之前的版本中，我们需要使用括号来明确 | 的优先级：
----- ----- - --------------- ----- --- - ------------ ----- ----- - ----------------- ---------------------- -- -----------
在 ES12 中，| 的优先级已经得到了提高，因此我们不需要使用括号来明确优先级。以下是相同的示例，但不使用括号：
----- ----- - ------------- ----- --- - ------------ ----- ----- - ----------------- ---------------------- -- -----------
2. 后行断言
在之前的版本中，正则表达式只支持正向断言，而不支持后行断言。在 ES12 中，我们可以使用 (?<=...) 和 (?<!...) 来指定后行断言。
例如，假设我们有一个字符串，其中包含一些数字和货币符号。我们希望匹配数字后面的货币符号，但不包括数字本身。在之前的版本中，我们需要使用正向断言来实现：
----- ----- - ------------- ----- --- - -- ---- --- --- --- ---- ----- ----- ------- - ----------------- --------------------- -- ------ -----
在 ES12 中，我们可以使用后行断言来实现相同的目的：
----- ----- - ------------- ----- --- - -- ---- --- --- --- ---- ----- ----- ------- - ----------------- --------------------- -- ----- ----
在这个例子中，我们使用了 (?<=\d) 来指定 $ 符号必须出现在数字后面。这样，我们就可以排除数字本身。
3. Unicode 属性转义
在之前的版本中，正则表达式只支持 ASCII 字符集，而不支持 Unicode。在 ES12 中，我们可以使用 \p{} 来指定 Unicode 属性。
例如，假设我们有一个字符串，其中包含一些中文字符。我们可以使用以下正则表达式来匹配它们：
----- ----- - -------------------------- ----- --- - --------- ----- ------- - ----------------- --------------------- -- ----- ---- ---- ----
在这个例子中，我们使用了 \p{Unified_Ideograph} 来指定中文字符。这样，我们就可以匹配包含中文字符的字符串。
总结
在 ES12 中，正则表达式得到了一些增强，包括新的功能和语法改进。其中最重要的新增功能是命名捕获组、s 修饰符和零宽度断言。语法改进包括 | 的优先级、后行断言和 Unicode 属性转义。这些增强使得正则表达式更加强大和灵活，可以帮助我们更好地处理字符串。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660a0e58d10417a2228de992