在前端开发中，我们经常需要对一段文本进行多个关键字的匹配，以实现搜索、高亮等功能。在过去，我们需要使用多个正则表达式来实现这个功能，这不仅代码繁琐，而且效率低下。在 ES11 中，新增了 matchAll() 方法，可以有效地解决这个问题。
matchAll() 方法
matchAll() 方法是 String 对象的一个新方法，它可以返回一个迭代器，用于遍历字符串中所有匹配正则表达式的结果。它的使用方法如下：
const str = 'hello world';
const regex = /l/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}上面的代码中，我们定义了一个字符串 str 和一个正则表达式 regex，然后使用 matchAll() 方法获取到所有匹配正则表达式的结果，并使用 for...of 循环遍历输出。
matchAll() 方法返回的结果是一个迭代器，每个迭代项都是一个数组，包含了匹配到的文本、匹配到的位置等信息。例如上面的代码输出的结果为：
[ 'l', index: 2, input: 'hello world', groups: undefined ] [ 'l', index: 3, input: 'hello world', groups: undefined ] [ 'l', index: 9, input: 'hello world', groups: undefined ]
多关键字匹配
利用 matchAll() 方法，我们可以很方便地实现多关键字匹配。例如，我们要对一段文本进行多个关键字的匹配，我们可以使用一个正则表达式来匹配所有关键字，然后使用 matchAll() 方法获取到所有匹配结果。示例如下：
const str = 'hello world';
const keywords = ['l', 'r'];
const regex = new RegExp(keywords.join('|'), 'g');
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}上面的代码中，我们定义了一个字符串 str 和一个关键字数组 keywords，然后使用 join() 方法将关键字数组转换成正则表达式，使用 matchAll() 方法获取到所有匹配正则表达式的结果，并使用 for...of 循环遍历输出。
优化匹配结果
使用 matchAll() 方法可以很方便地实现多关键字匹配，但是它返回的结果不够直观，我们可能需要对结果进行优化。例如，我们希望将匹配结果转换成一个数组，数组中每个元素是一个对象，包含了匹配到的文本、匹配到的关键字等信息。示例如下：
-- -------------------- ---- ------- ----- --- - ------ ------- ----- -------- - ----- ----- ----- ----- - --- -------------------------- ----- ----- ------- - ------------------------------- ----- -- -- ----- --------- -------- --------------------- -- --------------------------- ---- ---------------------
上面的代码中，我们使用 Array.from() 方法将迭代器转换成数组，并使用 map() 方法将每个迭代项转换成一个对象，对象包含了匹配到的文本和匹配到的关键字。
总结
在 ES11 中，新增了 matchAll() 方法，可以很方便地实现多关键字匹配，减少了代码的复杂度，提高了效率。在实际开发中，我们可以根据需求对匹配结果进行优化，使其更加直观和易于使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65156a1595b1f8cacddde1ee