JavaScript match()匹配后返回匹配子串后无关文本问题

• 核心问题出在正则的贪婪匹配特性：你写的(.+)默认会尽可能匹配最长的符合规则的字符串。当你逐行处理的文本行内存在多个结构符合的<a>标签时，正则会从第一个匹配到的<a>起始位置，一直匹配到当前行内最后一个</a>的结束位置，两个标签中间的所有无关文本都会被包含进匹配结果里。
• 按\n分割HTML的逻辑本身不可靠：HTML语法没有要求标签必须单行书写，href属性、标签内容都可能跨行，按行切割很容易把完整的<a>标签拆成多个片段，直接导致匹配逻辑错乱。
• 正则约束太松散：匹配href属性值、链接文本时没有做字符范围限制，比如匹配href值时没有排除闭合引号"，匹配链接文本时没有排除标签起始符<，很容易出现越界匹配。
• 你单独拿单条链接的字符串测试时正常，是因为测试样本里只有一个<a>标签，贪婪匹配不会跨到其他标签，自然能返回符合预期的结果。

• 取消逐行分割逻辑，直接对完整的HTML文本做匹配，避免标签跨行导致的匹配失败。
• 重写正则，收紧匹配规则：
  • 用[^"]+匹配href属性值（匹配所有非引号字符，不会超出属性范围）
  • 用[^<]+匹配链接文本（匹配所有非标签起始符的字符，不会跨到其他标签）
  • 用\s+匹配标签属性之间的空白，兼容多空格、制表符等场景
  • 加上全局匹配标记g，一次性提取所有符合条件的链接
• 修正后的可运行代码参考：

// text为读取到的完整HTML文件内容
var text;

// 优化后的正则
const linkReg = /<a\s+href="https?:\/\/angst\.org\/frustration\/([^"]+)\.html"\s+class="outlink">([^<]+)<\/a>/g;

let matchRes;
// 循环提取所有匹配的链接
while ((matchRes = linkReg.exec(text)) !== null) {
  // matchRes[0] 为完整的a标签字符串
  console.log(matchRes[0]);
  // 如果需要取链接路径、链接文本，可以用matchRes[1]、matchRes[2]
}

如果需要处理的HTML结构复杂、嵌套多，正则方案仍然存在概率性匹配错误，更稳妥的方案是使用专门的HTML解析库，通过DOM选择器提取a标签，稳定性远高于正则匹配。

内容的提问来源于stack exchange，提问作者Steve