How to convert all Links of a webpage into short URLs?

Question

the thing is I want to change all the URL's in a webpage for Short URL's, (of any service, a known one would be preferable) I think this can be done with a simple Javascript file linked in the tag of the webpage, am I right? Wich service can I use to do this? Thanks!

P.S. The idea is that, when I write an URL into the webpage or a URL appears (because the page writted it by itself) some script or service change them all into short Links, so the real links never get shown in the webpage, if it's possible, I would like to prevent the user to "see" the real links, I mean, it's preferable if I can use a service that, when shrinking a URL and the user follows it, the real one never appears in user's adress bar, but this is optional...

I'll wait for your answers, Thanks a lot! :)

EDITING - I want to use something like anonym.to, but with a shork link service, look:

If you use the anonym.to javascript code:

<script src="http://js.anonym.to/anonym/anonymize.js" type="text/javascript"></script>

<script type="text/javascript"><!--
protected_links = "";

auto_anonymize();
//--></script>

it will change ALL THE LINKS of a webpage with anonym.to Links, I want to do The same thing but using some Known URL shortening service, Can you tell me how? Thanks!

Answer 1

It depends if you want to do this programatically or before hand (created by you and then loaded into the page). What I would do is use the google API for the goo.gl goo.gl. You could grab all of the links via jquery and then iterate through, then swap to a short url with the google API. Anything that was native in the page could still be seen in the source but not if you hover or click on it. If you are loading content via AJAX calls then you could edit it then before the links are written to the page.

Answer 2

Would you settle for just changing the way you hide the link? This seems very undesirable (both from a host and visitor perspective) to hide the links, but this could do what you'd like (and would be supported only in browsers that support JS):

var links = document.getElementsByTagName('a');
for (var l = 0; l < links.length; l++){
    links[l].rel = links[l].href;
    links[l].href = '#';

    if (links[l].addEventListener) {
        links[l].addEventListener("click",myClick,false);

    } else if (links[l].attachEvent) {
        links[l].attachEvent("onclick",myClick);
    } else {
        links[l].onclick = myClick;
    }
}
function myClick(e){
    window.location = this.rel;
    return false;
}

working example: http://www.jsfiddle.net/bsU8n/