在 JavaScript 中，字符串是一个基本的数据类型，同时也是相当重要的数据类型之一。在前端开发中，我们经常需要操作字符串，一些关于字符串的操作方法也已经成为了每位开发者的日常工具。ES12 就新增了一种字符串的操作方法 String.prototype.matchAll，本文将详细介绍这个新的字符串操作方法。
什么是 String.prototype.matchAll 方法
String.prototype.matchAll 方法是在 ES12 中新加入的字符串操作方法，用于返回一个迭代器，可以迭代处字符串中所有符合正则表达式要求的子字符串。当匹配到的子字符串存在分组时，每个分组都将作为数组的一项返回，这项新方法对于字符串的分组操作非常方便。
方法的语法
以下是这个方法的语法：
string.matchAll(regexp)
其中，regexp 为一个正则表达式对象，用于指定需要搜索的正则表达式。
方法返回值
返回一个 RegExpMatchArray 类型的数组，其中每个匹配结果的信息都包含在数组中。返回结果包含了字符串中所有与正则表达式匹配的字符串的信息，包括子字符串的起始位置、子字符串内容以及匹配的子字符串。
方法示例
下面给出一个简单的实例来演示这个方法的基本用法。假设现在有一个字符串 str，包含了多个数字，我们希望获取这个字符串中所有数字的下标及内容。那么我们应该这样做：
-- -------------------- ---- ------- ----- --- - -- ---- --- --- ----- ----- ----- - ------- ----- ------- - -------------------- --- ------ ----- -- -------- - ------------------------ ----- -- ----- ----------------- -
在上面的代码中，首先我们使用一个正则表达式 /\d+/g 用于匹配字符串中所有连续的数字。然后调用 matchAll 方法来获取这个字符串中所有满足正则表达式的子字符串。最后，我们使用 for...of 循环来遍历匹配结果，并输出每一个匹配到的数字及其在字符串中的下标。
实践应用
在实践中，String.prototype.matchAll 方法可以被用在很多场景中，这里我列举一些可能会用到的场景。
1. 获取字符串中的链接地址
假设我们现在有一个 HTML 文本，我们需要从中获取出所有链接的地址。在这个例子中，我们可以使用下面的这个正则表达式来匹配链接：
const regex = /(?:https?|ftp|mailto):\/\/[^\s]+/g;
在上面的代码片段中，我们使用了一个非捕获性分组 /:\/\/[^\s]+/ 来匹配 URL，使用 [^\s] 来消除 URL 中的空格。使用 matchAll 方法可以轻松获取到所有链接的地址。
-- -------------------- ---- -------
----- ---- - -
----
------ ---------------------------------------------
------ ---------------------------------------------
------ ------------------------------------------
-----
--
----- ----- - ------------------------------------
----- ----- - ----------------------------------- -- ----------
-------------------上述代码将输出结果如下：
[ "https://www.google.com", "https://www.github.com", "http://www.baidu.com" ]
2. 处理多行文本
如果你需要处理的文本是多行的，而且希望匹配每一行的信息，那么 matchAll 方法就可以轻松实现。只需要在正则表达式中加上多行匹配标志 m 即可。例如，在下面的例子中，我们需要获取文本中每一行的数字个数，并输出其位置和内容。
-- -------------------- ---- ------- ----- ---- - - - - - - - - - - - -- ----- ----- - -------- ----- ------- - -------------------------- --- ------ ----- -- -------- - -------------------- - - ----- -- ----- - - ------------- -
在上面的例子中，我们使用正则表达式 /d+/gm 匹配了多行中的数字。如果没有使用多行匹配标志 m，则只能够匹配第一行的数字，并且输出结果也只会显示第一行。
个人总结
String.prototype.matchAll 方法是 ES12 中一个非常好用的方法，它允许我们轻松地获取字符串中所有满足正则表达式的子字符串信息，适用于处理多行文本，以及获取字符串中的链接地址等场景。希望本文对大家了解 ES12 的这个新方法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3f87748841e98940698fc