使用 javascript 编辑所有外部链接答案

【问题标题】：Editing all external links with javascript使用 javascript 编辑所有外部链接
【发布时间】：2010-09-22 08:48:05
【问题描述】：

如何使用 javascript 浏览 div 中的所有外部链接，添加（或附加）一个类和替代文本？

我想我需要获取 div 元素内的所有对象，然后检查每个对象是否为 a ，并检查 href 属性是否以 http(s):// 开头（应该是外部链接），然后添加content 到 alt 和 class 属性（如果它们不存在，则创建它们，如果它们存在；附加想要的值）。

但是，我如何在代码中做到这一点？

【问题讨论】：

对不起，我现在要出去，如果没有人接，请等几个小时，直到我回来。所以我可以回答你.. 抱歉 =/
我很好奇。您是否正在使用任何特定的 javascript 库或者您想要使用？
嗯，不依赖任何库是件好事 :)
不确定您是否收到关于我在您的 cmets 上的回答的通知。所以我警告你我的代码有更新...... :-) PS：我忘了指出，但标签中没有 alt 属性...... ;-) 这就是我使用 title 属性的原因。跨度>

标签： javascript html href

【解决方案1】：

这个是测试过的：

<style type="text/css">
.AddedClass
{
  background-color: #88FF99;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
  var re = /^(https?:\/\/[^\/]+).*$/;
  var currentHref = window.location.href.replace(re, '$1');
  var reLocal = new RegExp('^' + currentHref.replace(/\./, '\\.'));

  var linksDiv = document.getElementById("Links");
  if (linksDiv == null) return;
  var links = linksDiv.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++)
  {
    var href = links[i].href;
    if (href == '' || reLocal.test(href) || !/^http/.test(href))
      continue;
    if (links[i].className != undefined)
    {
      links[i].className += ' AddedClass';
    }
    else
    {
      links[i].className = 'AddedClass';
    }
    if (links[i].title != undefined && links[i].title != '')
    {
      links[i].title += ' (outside link)';
    }
    else
    {
      links[i].title = 'Outside link';
    }
  }
}
</script>

<div id="Links">
<a name="_Links"></a>
<a href="/foo.asp">FOO</a>
<a href="ftp://FTP.org/FILE.zip">FILE</a>
<a href="http://example.com/somewhere.html">SomeWhere</a>
<a href="http://example.com/somewhere2.html" class="Gah">SomeWhere 2</a>
<a href="http://example.com/somewhere3.html" title="It goes somewhere">SomeWhere 3</a>
<a href="https://another-example.com/elsewhere.php?foo=bar">ElseWhere 1</a>
<a href="https://another-example.com/elsewhere.php?foo=boz" class="Doh">ElseWhere 2</a>
<a href="https://another-example.com/elsewhere.php?foo=rad" title="It goes elsewhere">ElseWhere 3</a>
<a href="deep/below/bar.asp">BAR</a>
<a href="javascript:ShowHideElement('me');">Show/Hide</a>
</div>

如果您使用的是共享服务器上的帐户，例如 http://big-server.com/~UserName/，您可能需要对 URL 进行硬编码以超出顶层。另一方面，如果您希望将 http://foo.my-server.com 和 http://bar.my-server.com 标记为本地，则可能需要更改 RE。

[更新] 良好的评论后提高了鲁棒性...
我没有强调 FTP 或其他协议，它们可能应该有一个独特的例程。

【讨论】：

但这似乎也编辑了内部链接（没有http的链接）？
第一句话：测试一下！在我测试的所有浏览器（IE6、FF3、Safari 3、Opera 9）中，href 字段都转换为完整 URL。第二点：有效。也适用于 JS 链接。我更新了代码。

【解决方案2】：

我的（非框架）方法大致如下：

window.onload = function(){
   targetDiv = document.getElementById("divName");
   linksArray = targetDiv.getElementsByTagName("a");
   for(i=0;i=linksArray.length;i++){
      thisLink = linksArray[i].href;
      if(thisLink.substring(4,0) = "http"){
         linksArray[i].className += "yourcontent";  //you said append so +=
         linksArray[i].alt += "yourcontent";
             } 
       }
   }

这没有经过测试，但我会这样开始并从这里调试它。

【讨论】：

【解决方案3】：

我认为这样的事情可以作为一个起点：

var links = document.getElementsByTagName("a"); //use div object here instead of document
for (var i=0; i<links.length; i++)
{
   if (links[i].href.substring(0, 5) == 'https')
   {
      links[i].setAttribute('title', 'abc');
      links[i].setAttribute('class', 'abc');
      links[i].setAttribute('className', 'abc');
   }
}

您还可以遍历文档中的所有 A 元素，并检查父级以查看 div 是否是您要查找的那个

【讨论】：

小优化：for (var i=0, n<links.length; i<n; ++i)
可能是拼写错误：初始化子句中的“n=links.length”。迭代顺序不重要时的替代优化：'for (var i= links.length; i-->0;)'

【解决方案4】：

这可以通过Jquery 轻松完成。您可以将此添加到 onload：

$("div a[href^='http']").each(function() {
  $(this).attr("alt",altText);
  var oldClassAttributeValue = $(this).attr("class");
  if(!oldClassAttributeValue) {
   $(this).attr("class",newClassAttributeValue);
  }
});

您可以修改它以添加文本。也可以使用css 函数修改类。

【讨论】：