替換<a>HTML字符串中的</a>所有<a>標簽</a>

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事件處理程序，它可以防止用戶使用鼠標右鍵單擊->“在新標簽頁中打開”或“復制鏈接地址”。

用這個：

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);
     }
  });
}

見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);
    }
});

見jsfiddle

或者您可以使用jQuery ：

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

見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