使用带括号正则表达式的 Regex.exec() 来提取字符串的匹配项

Created: November-22, 2018

有时你不想简单地替换或删除字符串。有时你想要提取和处理匹配。这是一个如何操作匹配的示例。

什么是匹配？当为字符串中的整个正则表达式找到兼容的子字符串时，exec 命令会产生匹配。匹配是一个数组，首先是匹配的整个子字符串和匹配中的所有括号。

想象一下 html 字符串：

<html>
<head></head>
<body>
  <h1>Example</h1>
  <p>Look a this great link : <a href="https://stackoverflow.com">Stackoverflow</a> http://anotherlinkoutsideatag</p>
  Copyright <a href="https://stackoverflow.com">Stackoverflow</a>
</body>

你想要提取并获取 a 标记内的所有链接。首先，这里是你写的正则表达式：

var re = /<a[^>]*href="https?:\/\/.*"[^>]*>[^<]*<\/a>/g;

但是现在，想象一下你想要每个环节的 href 和 anchor。你想要它在一起。你只需为每个匹配添加一个新的正则表达式，或者你可以使用括号：

var re = /<a[^>]*href="(https?:\/\/.*)"[^>]*>([^<]*)<\/a>/g; 
var str = '<html>\n    <head></head>\n    <body>\n        <h1>Example</h1>\n        <p>Look a this great link : <a href="https://stackoverflow.com">Stackoverflow</a> http://anotherlinkoutsideatag</p>\n\n        Copyright <a href="https://stackoverflow.com">Stackoverflow</a>\n    </body>\';\n';
var m;
var links = [];

while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
    console.log(m[0]); // The all substring
    console.log(m[1]); // The href subpart
    console.log(m[2]); // The anchor subpart

    links.push({
      match : m[0],   // the entire match
      href : m[1],    // the first parenthesis => (https?:\/\/.*)
      anchor : m[2],  // the second one => ([^<]*)
    });
}

在循环结束时，你有一个与 anchor 和 href 的链接数组，你可以用它来写降价，例如：

links.forEach(function(link) {
  console.log('[%s](%s)', link.anchor, link.href);
});

更进一步：

嵌套括号