JS `RegExp Match Indices` (`d` 标志，ES2022)：获取匹配组的开始/结束索引

好的，各位观众老爷，今天咱们来聊聊 JavaScript 里一个挺酷炫的新玩意儿：RegExp Match Indices，也就是 ES2022 中那个带着 d 标志的正则表达式。 别看名字长，其实它的作用简单粗暴，就是能让你精确地知道你的正则表达式匹配到了字符串的哪个位置，甚至能告诉你每个捕获组都在哪儿！

开场白：Regex 的爱恨情仇

话说程序员对正则表达式的感情，那是相当复杂的。一方面，我们爱它的强大，能用短短几行代码搞定各种复杂的文本处理任务。另一方面，我们又恨它的晦涩，一不小心就写出个让人抓狂的 bug，而且还很难调试。

以前我们用正则表达式，主要关心的是“匹配到了没？”和“匹配到了啥？”。至于匹配的具体位置，那得费一番功夫才能搞到。有了 RegExp Match Indices，情况就不一样了，它就像给你的正则表达式加了个 GPS，能告诉你匹配的每一个细节。

d 标志：开启寻宝之旅

要使用 RegExp Match Indices，首先得给你的正则表达式加上 d 标志。这个 d 代表什么呢？官方说法是 "indices"，索引的意思。你可以理解为 "detailed"，更详细的信息。反正只要记住，加上它，你就能获得更多关于匹配的信息。

举个例子：

const regex = /(hello) (world)/d;
const str = "hello world, hello universe";
const match = regex.exec(str);

console.log(match);

如果你在支持 ES2022 的环境中运行这段代码，你会发现 match 对象里多了一个 indices 属性。这个 indices 属性是一个数组，它的每一项对应着正则表达式中的一个捕获组（包括整个匹配）。

indices 属性：宝藏的藏身之处

indices 属性里面存的是啥呢？它是一个数组，数组的每一项都是一个包含 start 和 end 属性的对象。start 表示匹配的起始索引，end 表示匹配的结束索引。

让我们来仔细看看上面的例子：

const regex = /(hello) (world)/d;
const str = "hello world, hello universe";
const match = regex.exec(str);

console.log(match.indices);
/*
输出:
[
  [0, 11],  // 整个匹配 "hello world" 的起始和结束索引
  [0, 5],   // 第一个捕获组 "hello" 的起始和结束索引
  [6, 11]  // 第二个捕获组 "world" 的起始和结束索引
]
*/

看到了没？match.indices[0] 对应着整个匹配，它的 start 是 0，end 是 11，表示 "hello world" 这个字符串在原字符串中的位置。match.indices[1] 对应着第一个捕获组 "hello"，它的 start 是 0，end 是 5。match.indices[2] 对应着第二个捕获组 "world"，它的 start 是 6，end 是 11。

实战演练：提取 Markdown 链接

光说不练假把式，咱们来个实际的例子。假设我们要从一段 Markdown 文本中提取所有的链接地址。Markdown 链接的格式是 [链接文字](链接地址)。

const markdownText = `
This is a [link to Google](https://www.google.com).
And this is another [link to Bing](https://www.bing.com).
`;

const regex = /[(.*?)]((.*?))/gd; // 注意 g 标志和 d 标志
let match;

while ((match = regex.exec(markdownText)) !== null) {
  console.log("完整匹配:", match[0]);
  console.log("链接文字:", match[1]);
  console.log("链接地址:", match[2]);
  console.log("完整匹配索引:", match.indices[0]);
  console.log("链接文字索引:", match.indices[1]);
  console.log("链接地址索引:", match.indices[2]);
  console.log("--------------------");
}

在这个例子中，我们使用了 g 标志，表示全局匹配，也就是找到所有符合条件的链接。同时，我们也使用了 d 标志，这样就能获得每个匹配的索引信息。

运行这段代码，你会看到类似这样的输出：

完整匹配: [link to Google](https://www.google.com)
链接文字: link to Google
链接地址: https://www.google.com
完整匹配索引: [ 12, 48 ]
链接文字索引: [ 13, 27 ]
链接地址索引: [ 29, 47 ]
--------------------
完整匹配: [link to Bing](https://www.bing.com)
链接文字: link to Bing
链接地址: https://www.bing.com
完整匹配索引: [ 53, 86 ]
链接文字索引: [ 54, 67 ]
链接地址索引: [ 69, 85 ]
--------------------

通过 match.indices，我们不仅可以拿到链接地址，还能知道它在原字符串中的位置。这在很多场景下都非常有用，比如高亮显示链接，或者进行更复杂的文本处理。

命名捕获组：让代码更易读

ES2018 引入了命名捕获组，它可以让你给捕获组起个名字，这样代码就更易读了。RegExp Match Indices 也支持命名捕获组。

const regex = /(?<greeting>hello) (?<name>world)/d;
const str = "hello world, hello universe";
const match = regex.exec(str);

console.log(match.groups); // { greeting: 'hello', name: 'world' }
console.log(match.indices.groups); // { greeting: [0, 5], name: [6, 11] }

在这个例子中，我们给第一个捕获组起了个名字叫 greeting，给第二个捕获组起了个名字叫 name。通过 match.groups，我们可以拿到每个命名捕获组的值。通过 match.indices.groups，我们可以拿到每个命名捕获组的索引信息。

应用场景：无限可能

RegExp Match Indices 的应用场景非常广泛，只要你需要知道正则表达式匹配的具体位置，它就能派上用场。

• 代码编辑器： 高亮显示匹配的文本，提供更精准的代码提示。
• 文本处理工具： 精确定位和替换文本，进行更复杂的文本转换。
• 日志分析： 从日志文件中提取关键信息，并分析其出现的位置。
• 数据验证： 验证用户输入是否符合规范，并给出更详细的错误提示。

兼容性：未来的趋势

虽然 RegExp Match Indices 是 ES2022 的新特性，但它的兼容性正在逐渐改善。目前，主流的浏览器和 Node.js 都已经支持它。如果你需要在旧版本的环境中使用它，可以使用 Babel 等工具进行转换。

总的来说，RegExp Match Indices 是一个非常有用的新特性，它让正则表达式的处理能力更上一层楼。掌握它，能让你在文本处理方面更加得心应手。

总结：Regex 的未来

特性	描述
d 标志	开启 RegExp Match Indices 功能，提供更详细的匹配信息。
indices 属性	包含匹配的索引信息，是一个数组，每一项对应一个捕获组。
start 属性	匹配的起始索引。
end 属性	匹配的结束索引。
命名捕获组	可以给捕获组起个名字，让代码更易读。
match.indices.groups	包含命名捕获组的索引信息。
应用场景	代码编辑器、文本处理工具、日志分析、数据验证等。
兼容性	逐渐改善，主流浏览器和 Node.js 已经支持。

好了，今天的讲座就到这里。希望大家能掌握 RegExp Match Indices 这个新武器，在编程的道路上越走越远！ 记住，正则表达式虽然复杂，但只要你肯花时间去学习，就能驾驭它，让它为你所用。 下课！