Question

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

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

进入这个：

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

有什么想法吗？

Answer 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

Answer 2

不要使用RegExp，因为将匹配安全地限制为您定位的锚链接是非常困难的，如果不是不可能的话。相反，你应该使用自然每个浏览器都内置的DOM解析器。

并且不使用onclick html属性，因为不需要在javascript中调整html来添加javascript事件处理程序，并且它会阻止用户使用诸如右键单击之类的内容 - ＆gt; ＆＃39;在新标签中打开＆＃39;或复制链接地址＆＃39;。

使用此：

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

Answer 3

您可以使用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 +"');");
}

Answer 4

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

http://regex101.com/r/dK2oU5

替换所有<a> tags in HTML string</a>

4 个答案: