Highlight all links

[agibsonsw]

Hello.

Here's what I think is a handy 'bookmarklet'. If you have it as a button on your bookmarks or favorites bar and click it, it will highlight all links within the current page in yellow. Clicking again will remove the highlight. I suspect there are probably add-ons out there that do a similar thing, but I haven't looked.

Code: Select all

javascript:function%20Traverse(task,node){this.iterate=function%20iterate(task,node){for(var%20x=0;x<node.childNodes.length;x++){var%20childNode=node.childNodes[x];task(childNode);if(childNode.childNodes.length>0)this.iterate(task,childNode);}}}var%20traverse=new%20Traverse();traverse.iterate(Highlight,document.body);function%20Highlight(node){if(node.nodeName=='A'){node.style.backgroundColor=(node.style.backgroundColor=='yellow')?'inherit':'yellow';}}

You would need to create a new bookmark/favorite and paste the code as the location - but remove the line-breaks first (before you copy it).

The original function was by a chap called Ben de Haan. I modified it to be a bookmarklet and to toggle the highlight. Andy.

Added: I should also warn you that it would take a while with a large page!

[jscher2000]

That's a lot of work if you are styling every instance of a nodeName in exactly the same way. Try leveraging the power of CSS:

Code: Select all

javascript:if(document.getElementById("linkhilite")){document.getElementById("linkhilite").parentNode.removeChild(document.getElementById("linkhilite"))}else{var s=document.createElement("style");s.id="linkhilite";s.type="text/css";s.appendChild(document.createTextNode("a{background-color:yellow !important}"));document.body.appendChild(s);}void 0;

[agibsonsw]

Cool!

I was investigating 'walking the DOM tree' but in the back of my mind I remember wanting to highlight links, so I brought the two together in perfect disharmony.

It's not advisable to walk the DOM tree - you might fall off..

[ChrisGreaves]

Cool!

.. Times TWO. Thanks Andy and Jefferson.
I have BOTH on my toolbar now; they seem to do the same thing, but might you educate us lay-folks into the pros and cons of each method?

(I learned my lesson from a month ago and pasted the javascript into the "Location" of a new bookmark, right?)

[agibsonsw]

Hi.
Jefferson's is much the better as it just creates a simple css style rule to apply the highlight. The style rule affects all 'a' tags within the page immediately.

Mine's a bit dodgy as it loops throught the entire document looking for 'a' tags and setting the background colour (sic). With a very large web page this could even crash!

My excuse is that I was investigating looking through an entire web page at the time - its 'document or DOM tree'. Andy.

Added: Yes, you are quit right to paste it into the location, being careful that there are no spaces or returns in the text.

[ChrisGreaves]

Mine's a bit dodgy as it loops through the entire document ...

Thanks Andy, and the excuse is good.
My historic background is FORTRAN so looping is embedded in my brain, but I often write apparently klutzy code as a means of testing some specific skill in a language.

[jscher2000]

I generally loop over collections and arrays, since I learned what little I know about programming by learning WordBasic. Recently, however, I've seen remarkable achievements with XPath and regular expressions, so I'm starting to step back and think: "do I need to touch each individual element or is there a simpler way"? It's always better when someone else does it the hard way first — then I don't become invested in it.

[agibsonsw]

I was looking at XPath earlier and was quite intrigued by the prospect of obtaining a list of sorted nodes (I get excited easily :)), but my interest was squashed when I realised that IE doesn't support XPath (for HTML) :(. Yet another feature (like 'getElementsByClassName') that I can't use.

I've been using regular expressions particularly to check the existence of cookie names or values. (Versions I found extracted the whole cookie as an array first , which seemed overkill). They are quite amazing/ bewildering things, but I understand there can be an overhead in their use - I think the RexExp 'engine/brain' is downloaded each time(?). Andy.

[ChrisGreaves]

I generally loop over collections and arrays, since I learned ...

How odd! Jefferson, I had you down as an ace "Collections" guy, the sort who, like Hans, would think nothing of using Ctrl-Enter on an array of cells in Excel!