替换 HTML 字符串中的所有 <a> 标记答案

【问题标题】：Replace all <a> tags in HTML string替换 HTML 字符串中的所有 <a> 标记
【发布时间】：2014-06-03 08:54:31
【问题描述】：

假设我有一个包含一些<a href=".."> 标签的HTML 字符串。如何替换所有这些来翻译：

<a href="http://www.mylink.com">whatever</a>

进入这个：

<a href="#" onclick="openLink('http://www.mylink.com')">whatever</a>

有什么想法吗？

【问题讨论】：

您是否有理由为此使用正则表达式？
Obligatory link.
好的，我不需要使用正则表达式，只是一种以这种方式替换链接的方法

标签： javascript html regex

【解决方案1】：

你可以在你的字符串上使用这个正则表达式：

var re = new RegExp("<a href=\"([^\"]+)\"", "g");
  result = 
    string.replace(re, 
      "<a href=\"#\" onclick=\"openLink('$1')\"");

http://regex101.com/r/wN0aB2

更新
要考虑href 之前的属性，您可以使用：

var re = new RegExp("<a([^>]* )href=\"([^\"]+)\"", "g");
  result = 
    string.replace(re, 
      "<a$1href=\"#\" onclick=\"openLink('$2')\"");

http://regex101.com/r/bZ0nO4

【讨论】：

这个在全球范围内适用于所有链接！谢谢！ :)
@FidoBoy 使用正则表达式是个非常糟糕的主意！ stackoverflow.com/a/1732454/2846923
@d_inevitable 说实话 - 链接在 SO 中被过度使用了很长时间 - 虽然它非常有趣，但对于输入可预测且目标特定的特定任务，使用正则表达式可能是最优雅、简洁和高效的。
@UriAgassi 也许吧。但在这种情况下，使用正则表达式是非常错误的。
我在这个答案中看到的唯一限制是：server.com"> 不起作用。除此之外，我不是针对 DOM 使用它，而是针对从 REST 服务获取的简单 HTML 字符串。

【解决方案2】：

您可以使用 JS 轻松做到这一点。

在 DOM 和 setAttributes 中查找所有锚元素：

var anchors = document.getElementsByTagName("a");
for(var i =0; i < anchors.length; i++)
{       var myLink = anchors[i].getAttribute("href");
        anchors[i].setAttribute("href","#");
        anchors[i].setAttribute("onclick", "openLink('"+ myLink +"');");
}

【讨论】：

【解决方案3】：

不要使用正则表达式，因为即使不是不可能，也很难安全地将匹配限制为您所定位的锚链接。相反，您应该使用每个浏览器自然内置的 DOM 解析器。

并且不要使用onclick html 属性，因为不需要在 javascript 中调整 html 来添加 javascript 事件处理程序，它会阻止用户使用诸如右键单击 -> '在新选项卡中打开'或'复制链接地址。

使用这个：

var anchors = document.getElementsByTagName("a");

for (var i = 0 ; i != anchors.length ; i++) {
  anchors[i].addEventListener("click", function (event) {

     var href = this.getAttribute("href");

     if (href) {
       event.preventDefault();
       openLink(href);
     }
  });
}

See jsfiddle

或者您可以使用委托事件处理程序：

function openLink(href) {
 alert("openLink " + href);   
}

document.addEventListener("click", function (event) {
    if (event.target.tagName === "A" && event.target.href) { 
        event.preventDefault();
        openLink(event.target.href);
    }
});

See jsfiddle

或者你可以使用jQuery:

$("a[href]").click(function (event) {
   event.preventDefault();
   openLink($(this).attr("href"));
});

See jsfiddle

【讨论】：

为什么不建议使用 onclick html 属性？
@stackErr 因为它涉及在运行时调整 html 代码，而它可以纯粹在 javascript 中完成。
@FidoBoy 也许委托的事件处理程序会有所帮助？

【解决方案4】：

result = subject.replace(/<a.*?href="(.*?)".*?>(.*)<\/a>/img, "<a href=\"#\" onclick=\"openLink('$1')\">$2</a>");

http://regex101.com/r/dK2oU5

【讨论】：

我喜欢img 标志。使它看起来与图像有关：P
仅适用于第一个链接...不适用于 html 字符串中的所有链接
我建议不要这样做...如果明天您需要添加/删除另一个属性怎么办？您是否要发布另一个 SO 问题并让其他人发布另一个正则表达式解决方案？