探究 ES12 的 RegExp Match Indices

在前端开发中，正则表达式是一个非常重要的工具。而在ECMAScript 2021 (ES12) 中，正则表达式得到了进一步的改进，引入了一项新特性——RegExp Match Indices。这项特性为开发者提供了更便捷的处理匹配结果的方式。本篇文章将带你深入学习 RegExp Match Indices 的使用和具体实现。

RegExp Match Indices 是什么

在正则表达式中使用 exec(), match() 函数与 string 类型中的 match() 函数可以匹配字符串，得到一个匹配对象（Match Object）。这个对象包含了匹配的内容，索引位置，以及其他一些相关信息。但是，在ES11及以前的版本中，想要获取该对象的索引位置信息需要通过手动计算的方式实现。而在ES12中，我们可以使用 RegExp Match Indices 直接获取对象的索引位置值。

RegExp Match Indices 的用法

开启 RegExp Match Indices

要使用 RegExp Match Indices，需要开启起来。只需要在正则表达式对象的末尾添加 i 属性，即可开启。例如：

const regex = /hello/igm;

获取位置信息

在开启了 RegExp Match Indices 之后，通过使用 match() 函数匹配字符串，可以获取包含匹配结果以及位置信息的数组。

例如，我们来匹配一个字符串中所有的 "o"，并且获取它们在文本中的位置。

const regex = /o/igm;
const str = "hello world!";
const matches = [...str.matchAll(regex)];
for (const match of matches) {
  const index = match.index;
  console.log(`字符 ${match[0]} 的位置是：${index}`);
}

输出结果：

字符 o 的位置是：4
字符 o 的位置是：7
字符 o 的位置是：10

我们可以通过 match.index 直接获取匹配结果的索引位置信息，并实现对应操作。

实现范围匹配

有时候我们并不仅仅需要获取字符串中某个字符的位置信息，而是需要匹配一个字符串的范围，来实现对字符串的操作。这个时候，就可以使用 Match Array 中的输入格式。

例如，我们可以在字符串 "hello world!" 中匹配 "llo"，并获取该子字符串的位置范围。

const regex = /llo/;
const str = "hello world!";
const matches = str.match(regex);
console.log(matches.indices);

输出结果：

[ [ 2, 5 ] ]

matches.indices 返回的是一个二维数组，代表着匹配范围的起始位置和结束位置。这个时候，我们就可以通过 start 和 end 参数，截取字符串内的指定范围，来实现数据操作。

正则表达式案例

下面，让我们通过一些实际案例来更好地理解 RegExp Match Indices 的应用场景。

实现字符串选区

有时候我们需要一个操作能够选取字符串的某一段，这个时候我们依赖 JavaScript 自带的substr()函数进行截取。而 RegExp 进一步增强了获取截取范围的能力，我们可以通过正则表达式来实现对指定字符范围的截取。

例如，我们可以在一个包含连续的数字字母内容的字符串中，获取其中的两个数字字符之间的所有字母字符。

const regex = /\d([a-z]+)\d/i;
const str = "a1b2c3d4e";
const [,matched]= str.match(regex);
const startIndex = matched.index;
const endIndex = startIndex + matched[1].length;
console.log(str.substring(startIndex, endIndex));

输出结果：

b2c3d

前后截取指定字符串

除了截取指定范围的字符串之外，我们也需要能够获取匹配字符串的前后字符，来实现一些更加高级的操作。

例如，我们可以在一个包含 "http://" 前缀的字符串中，截取其中的域名部分。

const regex = /http:\/\/(.*?)($|\/)/i;
const str = "http://www.example.com";
const [, matched] = str.match(regex);
console.log(matched);

输出结果：

www.example.com

在这个例子中，我们使用了一个非贪婪的正则表达式 /http://(.*?)($|/)/i 来匹配中间的域名部分。matched[0] 获赞的字符串为 "http://www.example.com"，matched[1] 获取到的是域名部分。通过这种方式获取到的域名部分，就可以再进行更高级的处理了。

总结

RegExp Match Indices 是 ES12 中的一项非常实用的新特性。通过它，我们可以更加方便地处理正则表达式匹配后的结果。有了它，我们可以更加高效地处理字符串的长度、范围等问题，让开发效率更高，更加快速。

学习 RegExp Match Indices 不仅有利于我们更加深入地了解正则表达式的技巧，也为我们在实际开发中提供更加灵活、可靠的解决方案。希望本篇文章能对读者在提高编码水平，扩展知识面与开阔视野方面带来启示。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64507d07980a9b385b9832cb