JS中【match】和【matchAll】方法详解以及区别比较

JavaScript 中的正则表达式提供了强大的字符串匹配和处理能力，尤其通过 match() 和 matchAll() 两个方法，用户可以执行多种类型的匹配操作。以下是对 match() 和 matchAll() 的详细、全面的讲解。

一、match()

match() 方法用于在字符串中执行查找，返回第一个或全部匹配结果。根据是否使用全局标志 g，它的行为有很大不同。

1.1 match() 的基本语法

string.match(regexp)

• regexp 是一个正则表达式对象，也可以是一个字符串。如果是字符串，match() 方法将直接查找该字符串的首次出现。

• 返回值根据正则表达式的模式不同，会有两种情况：

  1. 如果使用了全局标志 g，match() 返回一个数组，包含所有匹配的结果。
  2. 如果没有使用 g，match() 返回一个数组，数组的第一个元素是整个匹配，后续元素是捕获组（若有）的匹配结果。

1.2 match() 示例

1.2.1 无全局标志

当正则表达式不带 g 标志时，match() 只返回第一个匹配的内容和捕获组。

const text = "I have 2 cats and 3 dogs.";
const result = text.match(/(\d+)/);

console.log(result); 
// 输出: ["2", "2"]

• result[0]：整个匹配（2）。
• result[1]：捕获组中的匹配（2）。

1.2.2 带全局标志

使用 g 标志后，match() 会返回所有的匹配项，但不会返回捕获组。

const text = "I have 2 cats and 3 dogs.";
const result = text.match(/\d+/g);

console.log(result);  
// 输出: ["2", "3"]

此时 match() 返回一个数组，包含了所有数字的匹配项 ["2", "3"]。

1.3 match() 方法的特殊情况

1. 无匹配项：如果正则表达式没有匹配到任何结果，match() 会返回 null。

   const result = "hello".match(/\d+/);
   console.log(result);  // 输出: null
   

2. 无全局标志但有捕获组：当没有 g 标志且有捕获组时，match() 不仅返回整个匹配，还会返回所有捕获组的匹配。

   const text = "The price is $100";
   const result = text.match(/(\$\d+)/);
   console.log(result);  
   // 输出: ["$100", "$100"]
   

---

二、matchAll()

matchAll() 方法是 ES2020 引入的一个新方法，它专门用于全局匹配，并且提供了更多关于每个匹配的详细信息（如捕获组），与 match() 不同的是，它总是返回一个包含详细信息的迭代器，即使没有 g 标志也可以进行全局匹配。

2.1 matchAll() 的基本语法

string.matchAll(regexp)

• regexp：这是一个正则表达式对象。不同于 match()，matchAll() 强烈建议使用全局标志 g，如果没有 g 标志，它会抛出错误。
• 返回值是一个可迭代对象，该对象包含了每一个匹配的结果。

2.2 matchAll() 示例

2.2.1 基本使用

matchAll() 返回的结果是一个 Iterator，你可以通过 for...of 循环或解构将所有结果提取出来。

const text = "I have 2 cats and 3 dogs.";
const matches = text.matchAll(/\d+/g);

for (const match of matches) {
  console.log(match[0]);  // 输出: "2", "3"
}

• match[0]：表示每次匹配的完整结果。

2.2.2 捕获组

matchAll() 不仅返回匹配项，还包括所有捕获组。都可以提取到这些信息。

const text = "I have 2 cats and 3 dogs.";
const matches = text.matchAll(/(\d+)/g);

for (const match of matches) {
  console.log(match[0]);  // 输出: "2", "3" (完整匹配)
  console.log(match[1]);  // 输出: "2", "3" (捕获组)
}

• match[0]：表示完整的匹配项。
• match[1]：表示第一个捕获组。

2.2.3 转换为数组

你可以通过 Array.from() 或扩展运算符 ... 将 matchAll() 的结果转换为数组。

const text = "I have 2 cats and 3 dogs.";
const resultArray = Array.from(text.matchAll(/\d+/g));

console.log(resultArray);
// 输出: [["2"], ["3"]]

• resultArray 是一个二维数组，每个子数组包含一次匹配及其捕获组。

2.3 matchAll() 方法的特殊情况

1. 没有全局标志 g：如果正则表达式没有 g 标志，matchAll() 会抛出错误。

   const text = "I have 2 cats and 3 dogs.";
   const result = text.matchAll(/\d+/);  // 错误：没有 g 标志
   

2. 支持捕获组：即使在没有 g 标志时，matchAll() 依然会返回所有捕获组。

---

三、match() 与 matchAll() 的区别

特性	match()	matchAll()
返回类型	数组（或 null）	迭代器（包含所有匹配及捕获组）
是否支持全局匹配	需要 g 标志才能全局匹配	始终全局匹配，不需要 g 标志
捕获组支持	仅在无 g 标志时返回捕获组	始终返回所有捕获组
返回多个结果	仅在有 g 标志时返回多个匹配项	始终返回多个匹配项和捕获组
返回的结果如何处理	只返回匹配项，捕获组不一定返回	返回匹配的所有详细信息，包括索引、捕获组等
适用场景	简单的正则匹配，适合单个结果或少量结果	复杂匹配，特别是需要捕获组和详细信息时

---

四、适用场景

1. match() 适用场景：

   • 当只需要找到第一个匹配结果或在简单的场景下查找所有匹配项时使用。
   • 不关心捕获组的详细信息，只关心匹配的值。

2. matchAll() 适用场景：

   • 当需要获取所有匹配项的详细信息，包括索引、捕获组时，matchAll() 更加合适。
   • 在涉及多个捕获组的复杂匹配场景中，使用 matchAll() 可以获得更多控制和信息。

---

总结

• match() 用于简单匹配，它在没有 g 标志时返回第一个匹配及捕获组，而在有 g 标志时返回所有匹配项，但不包含捕获组。
• matchAll() 提供了更强大的功能，返回一个包含所有匹配和捕获组的迭代器，适用于复杂匹配场景，特别是在处理多个捕获组时表现出色。

这两个方法各有优势，大家可以根据具体需求选择合适的方法，可以大大提升正则表达式的匹配效率。