Editing all external links using javascript

Question

How can I view all external links in a div with javascript by adding (or adding) a class and alt text?

I assume that I need to get all the objects inside the div element and then check if each object is a and check if the href attribute starts with http (s): // (then there should be an external link), then add the contents to the attribute alt and class (if they do not exist, create them, if they exist, add the necessary values).

But how to do it in code?

Answer 1

This test is checked:

<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> 

If you are on an account on a shared server, such as http://big-server.com/~UserName/ , you may need to hardcode the URL above the top level. Alternatively, you can change the RE if you want http://foo.my-server.com and http://bar.my-server.com marked as local.

[UPDATE] Increased reliability after good comments ...
I do not set aside FTP or other protocols; they probably deserve a separate procedure.

Answer 2

I think something like this might be the starting point:

 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'); } } 

you can also skip all A elements in the document and check the parent to see if the div is the one you are looking for

Answer 3

This can be easily done using jquery . You would add this to the download:

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

You can change this to add text. The class can also be modified using the css function.

Answer 4

My (no frame) approach would be something like:

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

This is not verified, but I would start and debug it here.