调整正则表达式以忽略链接HTML标记内的任何其他内容

Question

所以我有这个正则表达式：

<a(?:.*)href="(.*)"(?:.*)>(.*)<\/a>

到目前为止，我已经能够匹配其中包含额外属性的HTML链接标记。像课程和目标一样，有效。

我现在想要做的是调整它以匹配并忽略链接本身内的任何其他标签（如果有的话），因为我只想要链接的文本和地址。我不确定最好的方法。

Answer 1

始终使用DOM解析而不是正则表达式

这已被多次提出过。并且基于对日益复杂的正则表达式形成的评论，更容易检查DOM。以下面的例子为例：

function fragmentFromString(strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}

let html = `<a data-popup-text="take me to <a href='http://www.google.com'>a search engine</a>" href="testing.html" data-id="1" data-popup-text="take me to <a href='http://www.google.com'>a search engine</a>"><p>Testing <span>This</span></p></a>`;
let fragment = fragmentFromString(html);
let aTags = Array.from(fragment.querySelectorAll('a'));

aTags = aTags.map(a => {
  return {
    href: a.href,
    text: a.textContent
  }
});

console.log(aTags);

以上内容将HTML字符串转换为片段内的实际DOM。您仍然需要在某处附加该片段，但重点是，您现在可以查询a标签。上面的代码为您提供了一个对象数组，其中包含每个a标记的数据，它们的href值和innerText，减去所有html。

原始答案。不要使用它，它可以作为真正问题的背景：

我改变了一点，使用非贪婪的格式（。*？）。它还可以避免提前结束，因为@Gaby又名G. Petrioli指出，在属性中结束html。

<.*?href="(.*?)"(?:[^"]*")+>(.*)<\/a>

Check out the JS fiddle