提问人：FidoBoy 提问时间：4/19/2014 最后编辑：The Guy with The HatFidoBoy 更新时间：4/19/2014 访问量：4035
替换 HTML 字符串中的所有 <a> 标记
Replace all <a> tags in HTML string
问：
假设我有一个包含一些标签的 HTML 字符串。我怎样才能替换它们来翻译这个：<a href="..">
<a href="http://www.mylink.com">whatever</a>
进入这个：
<a href="#" onclick="openLink('http://www.mylink.com')">whatever</a>
有什么想法吗？
答：
0赞
Pedro Lobito
4/19/2014
#1
result = subject.replace(/<a.*?href="(.*?)".*?>(.*)<\/a>/img, "<a href=\"#\" onclick=\"openLink('$1')\">$2</a>");
评论
1赞
The Guy with The Hat
4/19/2014
我喜欢旗帜。使它看起来像与图像有关:Pimg
0赞
FidoBoy
4/19/2014
仅适用于第一个链接...不是 HTML 字符串中的所有链接
1赞
stackErr
4/19/2014
我建议不要这样做......如果明天您需要添加/删除另一个属性怎么办？您是否要发布另一个 SO 问题并让其他人发布另一个正则表达式解决方案？
3赞
Uri Agassi
4/19/2014
#2
您可以在字符串上使用此正则表达式：
var re = new RegExp("<a href=\"([^\"]+)\"", "g");
result =
string.replace(re,
"<a href=\"#\" onclick=\"openLink('$1')\"");
更新
：要考虑属性，则可以使用：href
var re = new RegExp("<a([^>]* )href=\"([^\"]+)\"", "g");
result =
string.replace(re,
"<a$1href=\"#\" onclick=\"openLink('$2')\"");
评论
0赞
FidoBoy
4/19/2014
这个在全球范围内适用于所有链接！谢谢！:)
0赞
d_inevitable
4/19/2014
@FidoBoy使用正则表达式是个坏主意！stackoverflow.com/a/1732454/2846923
1赞
Uri Agassi
4/19/2014
说实话@d_inevitable - 链接在 SO 中被过度使用了很长时间 - 尽管它非常有趣，但对于输入是可预测的、目标特定的特定任务，使用正则表达式可能是最优雅、简洁和高性能的。
0赞
d_inevitable
4/19/2014
@UriAgassi也许吧。但在这种情况下，使用正则表达式是非常错误的。
1赞
FidoBoy
4/19/2014
我在这个答案中看到的唯一限制是：<a rel=“text” href=“server.com”>不起作用。除此之外，我不是针对 DOM 使用它，而是针对我从 REST 服务获得的简单 HTML 字符串。
1赞
d_inevitable
4/19/2014
#3
不要使用正则表达式，因为即使不是不可能，也很难安全地将匹配项限制为您定位的锚链接。相反，你应该使用每个浏览器都内置的 DOM 解析器。
并且不要使用 html 属性，因为无需在 javascript 中调整 html 来添加 javascript 事件处理程序，并且它会阻止用户使用右键单击 ->“在新选项卡中打开”或“复制链接地址”之类的东西。onclick
使用这个：
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);
}
});
}
或者，您可以使用委托的事件处理程序：
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);
}
});
或者你可以使用 jQuery：
$("a[href]").click(function (event) {
event.preventDefault();
openLink($(this).attr("href"));
});
评论
0赞
stackErr
4/19/2014
为什么您建议不要使用 onclick html 属性？
1赞
d_inevitable
4/19/2014
@stackErr因为它涉及在运行时调整 HTML 代码，而它可以纯粹在 javascript 中完成。
0赞
d_inevitable
4/19/2014
@FidoBoy委托的事件处理程序会有所帮助？
1赞
stackErr
4/19/2014
#4
您可以使用 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 +"');");
}
评论