JavaScript：查找所有 <href> 链接并向其添加样式标记，其中包含字体、颜色等样式详细信息。

Question

我有一个字段，用户可以在其中输入一些文本，包括链接等。保存数据并预览文本后，我需要将所有链接格式化为<a href> 上设置的某个内联样式标签。没有使用 CSS 的选项，所以它应该是内联的。

输入文本示例：Some text goes here. Please go to my web site, click here <a href="http://www.onewebsite.com" target="_blank">www.onewebsite.com</a>. Then some more text here…..with more links etc……

预览时的示例文本：Some text goes here. Please go to my web site, click here <a href="http://www.onewebsite.com" target="_blank" style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;">www.onewebsite.com</a>. Then some more text here…..with more links etc……

请注意，style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;" 现在已添加到 <a href>。

如何以简单的方式使用 JavaScript 来实现？这将是某种功能，例如：

function formatPreview(myText){
  defaultStyle="style=\"font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;\"";
  myText = myText, find all a href and enter my defaultStyle 
  return myText
}

请告诉我。谢谢你的帮助。

Answer 1

不需要为此使用正则表达式。当您想要预览时，只需使用 jquery 将这些样式添加到链接中即可：

$("a[href='http://www.onewebsite.com']").css("font-family","Arial, Verdana, Helvetica, sans-serif"); 

$("a[href='http://www.onewebsite.com']").css("font-size","12px"); 

$("a[href='http://www.onewebsite.com']").css("color","#fa860b"); 

@Edit：好吧，很多人已经对我的评论最多了，你需要在你的 HTML 代码中包含 jquery 库

@Edit 2：如果你可以给achor标签加上一个ID，你可以使用下面的javascript

<a id="a1" href=".."></a>

var element = document.getElementById("a1");

a1.style.fontFamily = "Arial, Verdana, Helvetica, sans-serif";

a1.style.fontSize = "12px";

a1.style.color = "#fa860b";

Answer 2

为什么会有“无 CSS 选项”？如果您只想影响预览区域中的链接，那么（假设您的预览区域有id="preview"）只需这样做：

#preview a {
    font-family: 'Arial', 'Verdana', 'Helvetica', sans-serif;
    font-size: 12px;
    color: #fa860b;
}