How to replace a link's text with the absolute `href` URL?

Question

Using an extension for Firefox or Google Chrome, how can I modify all links on a page such that

<a href="www.google.com">Google</a>

becomes

<a href="http://www.google.com">http://www.google.com</a>

?

EDIT

Tampermonkey is Greasemonkey alternative for Google Chrome.

Solution 1

I wrote you a simple Greasemonkey userscript to replace
<a href="URL">TEXT</a> with <a href="ABSOLUTE_URL">ABSOLUTE_URL</a>:

// ==UserScript==
// @name        Replace Link Text with URL
// @namespace   http://igalvez.net
// @description Replaces <a href="URL">TEXT</a> with <a href="ABSOLUTE_URL">ABSOLUTE_URL</a>
// @version     1.0
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

$("a").each(function() {
    var url = this.href;
    $(this).attr('href', url);
    $(this).text(url);       
});

---

Note: This will break most page layouts, as URL's can be quite long.

Solution 2

And here's a bookmarklet version based off iglvzx's answer. The advantage of a bookmarklet is the page will look normal until the button (link) is pressed. As iglvzx noted, URLs tend to be long and break page layouts.Of course his Greasemonkey version is possible to enable permanently on a per page basis. The main difference is Greasemonkey is designed to be on most of the time, while a bookmarklet is off most of the time. It's browser agnostic, as long as jQuery and JavaScript bookmarklets work.

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$("a").each(function(){var%20a=this.href;$(this).attr("href",a);$(this).text(a)});});

Made using this tool.

You can add as a bookmarklet directly with the link available at the following link:

http://benalman.com/code/test/jquery-run-code-bookmarklet/?name=Run+jQuery+Code&ver=1.3.2&code=%24%28%22a%22%29.each%28function%28%29{var+a%3Dthis.href%3B%24%28this%29.attr%28%22href%22%2Ca%29%3B%24%28this%29.text%28a%29}%29%3B

^{Just copy and paste into the address bar. Adding as an actual link seems to break something. As both Markdown and HTML, too!}

Comments

[soandos]

It needs to be an extension?

[Ashok.N]

Does not matter. You can suggest different approach.

[slhck]

Why do you close the opening tag right away <a … /> </a>? Where did you get that HTML syntax from?

[iglvzx]

@slhck I've cleaned up the question. :)

[nhinkle]

Crazy. Awesome. Crazy awesome!

[iglvzx]

@nhinkle As Spiderman once said, "With 1337 skillz comes great responsibility."

[nhinkle]

As Abraham Lincoln once said, "The Internet is an amazing thing."

[tvdo]

This might be better as a bookmarklet - click to reveal URLs. That should keep page layouts intact until needed.

[iglvzx]

You can quickly enable/disable the script with a click, if the Greasemonkey icon/menu is on a toolbar.

[iglvzx]

Nice. Good idea. :)

[tvdo]

@iglvzx It seems to require a refresh to run a newly enabled script. I think the main difference is Greasemonkey is designed to be on most of the time, while a bookmarklet is off most of the time.

[Ashok.N]

@iglvzx Thank you for your good answer. I found a solution that with firebug and firequery. Because, I was not aware of Greasemonkey until you have typed this response. Thank you again.