Редактирование всех внешних ссылок с помощью JavaScript - PullRequest
Новая
       36

Редактирование всех внешних ссылок с помощью JavaScript

1 голос
/ 14 ноября 2008

Как я могу просмотреть все внешние ссылки в div с помощью javascript, добавив (или добавив) класс и alt-текст?

Полагаю, мне нужно извлечь все объекты внутри элемента div, затем проверить, является ли каждый объект a, и проверить, начинается ли атрибут href с http (s): // (затем должна быть внешней ссылкой), затем добавить содержимое атрибутов alt и class (если они не существуют, создайте их, если они существуют; добавьте нужные значения).

Но как мне это сделать в коде?

Ответы [ 4 ]

2 голосов
/ 14 ноября 2008

Этот протестирован: 

<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 / ~ имя_пользователя / , возможно, вы захотите жестко закодировать URL-адрес, чтобы выйти за пределы верхнего уровня. С другой стороны, вы можете изменить RE, если хотите, чтобы http://foo.my -server.com и http://bar.my -server.com были помечены как локальные.

[ОБНОВЛЕНИЕ] Улучшенная надежность после хороших замечаний ...
Я не выделяю FTP или другие протоколы, они, вероятно, заслуживают отдельной рутины.

2 голосов
/ 14 ноября 2008

Я думаю, что-то вроде этого может быть отправной точкой: 

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 тем, который вы ищете

0 голосов
/ 14 ноября 2008

Мой (не-каркасный) подход будет выглядеть примерно так: 

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

Это не проверено, но я бы начал так и отладил его отсюда.

0 голосов
/ 14 ноября 2008

Это можно сделать довольно легко с помощью Jquery . Вы бы добавили это в onload: 

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

Вы можете изменить это, чтобы добавить текст. Класс также можно изменить с помощью функции css .

...