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