在文本中查找和更改带有 js 的链接答案

【问题标题】：Find and alter links with js in a text在文本中查找和更改带有 js 的链接
【发布时间】：2013-04-12 15:37:59
【问题描述】：

我有一个必须作为电子邮件发送的文本。但是要给邮件布局，我们需要添加一些样式。我们必须做的是以下几点： 1 在文本中找到一个或多个具有这种格式的链接

<a href="RANDOM URL HERE">RANDOM TEXT</a>

2 把链接改成这种格式：

<a href="RANDOM URL HERE" style="color: #FFFFFF; text-decoration: none;"><span style="color: #FFFFFF;">RANDOM TEXT</span></a>

我不知道如何才能最好地做到这一点，使用正则表达式或 DOM，...

非常感谢！

【问题讨论】：

既然已经修改了a标签中的样式，为什么还要插入一个span？
因为有的邮件客户端只看''标签，有的只看''标签中的样式

标签： javascript html regex dom hyperlink

【解决方案1】：

在我看来，最好的方法是创建一个 CSS 类并将其添加到您的链接中。您不需要添加跨度标签！使用 DOM 是最好的方法。

【讨论】：

但它是用于将用作电子邮件的文本，并且电子邮件不使用css类，它必须是内联的

【解决方案2】：

首先，您应该考虑从不使用正则表达式来处理 HTML/XML 标记。你可以在这里阅读原因：https://stackoverflow.com/a/1732454/1249581 :)

然后，为了回答问题，您应该执行以下操作：

var div = document.createElement("div"),
    links;

div.innerHTML = textOfYourEmail;
links = div.getElementsByTagName("a");

for (var i = links.length; i--;) {
    var link = links[i],
        span = document.createElement("span");

    link.style.textDecoration = "none";
    link.style.color = "#fff";
    span.style.color = "#fff";

    while (link.firstChild) {
        span.appendChild(link.firstChild);
    }
    link.appendChild(span);
}

textOfYourEmail = div.innerHTML;

它使用嵌入式方法进行 DOM 操作。它快速可靠。

【讨论】：