How to append all href link with redirector url via javascript

Question

I have following URL in my few pages(http://something.com)..

<a href="http://something.com">Home</a>
<a href="index.html">Index</a>
<a href="about.html">About</a>
<a href="contact.php">Contact</a>
<a href="#">Same</a>
<a hre="http://example.com/home.html">New Home</a>
<a href="../services.html">Services</a>

and what I want is to convert all link to...

<a href="http://this.com/?url=http://something.com">Home</a>
<a href="http://this.com/?url=http://something.com/index.html">Index</a>
<a href="http://this.com/?url=http://something.com/about.html">About</a>
<a href="http://this.com/?url=http://something.com/contact.php">Contact</a>
<a href="#">Same</a>
<a hre="http://this.com/?url=http://example.com/home.html">New Home</a>
<a href="../services.html">Services</a>

So Basically I don't want to Convert "#" or "../" such link.

I am noob in JS.

From my effort, with the help of w3schools.. What i have tried to accomplish :-

<script type="text/javascript">
var url= document.getElementByTagName(a);
var pattern = /..\//g;
var result = pattern.test(url);
if(url.href != "#" || result === "false" ) {
var nurl = url.replace("http://this.com/?url="+url.href, url.href);
}
</script>

And I am not able to do anything... Please help, how can I modify URL and add http://this.com/?url=My_web_page_url_here.

UPDATE I replaced my javascript with

<script type="text/javascript">
var links = document.links;
var i = links.length;

while (i--) {
    if (links[i].href.slice(-1) == "#" || 
        links[i].getAttribute("href").slice(0, 3) == "../") {
        continue;
    }
    links[i].href = "http://this.com/?url=" + encodeURIComponent(links[i].href);
}​
</script>

And still all url's are in the same way without append.

Answer 1

Try this...

var links = document.links;
var i = links.length;

while (i--) {
    if (links[i].href.slice(-1) == "#" || 
        links[i].getAttribute("href").slice(0, 3) == "../") {
        continue;
    }
    links[i].href = "http://this.com/?url=" + encodeURIComponent(links[i].href);
}​

jsFiddle.

I encoded the parameter, but if you don't want it encoded, like in your examples, drop the call to encodeURIComponent().

Answer 2

Another way to approach this is with event delegation. This method rewrites the URL at the point the link is used (and not before):

window.onload = function(){

  var de = document.documentElement || document.body;
  /// an event listener that steps in at the point the user has
  /// clicked any element on the page. We specifically detect for
  /// links and redirect the outcome
  var proxyLink = function(e,t,href){
    /// handle old versions of IE
    e = e || Event; t = e.target || e.srcElement;
    /// hashs can occur at the end of external links, so am only checking
    /// your specific case. Switched to using getAttribute so as to get
    /// the original href string.
    if ( t.getAttribute('href').charAt(0) === '#' ) return;
    if ( t.getAttribute('href').indexOf('../') === 0 ) return;
    if ( String(t.nodeName).toLowerCase() == 'a' ) {
      if ( e.preventDefault ) { e.preventDefault(); }
      href = makeHrefAbsoluteIfPossible(t.href);
      window.location = 'http://this.com/?url='+encodeURIComponent(href);
      return (e.returnValue = false);
    }
  }

  /// add the listener to the body or document element, this will trigger
  /// the event onclick thanks to event bubbling.
  if ( de.addEventListener ) {
    /// handles modern browsers
    de.addEventListener('click', proxyLink, true);
  }
  else {
    /// handles old IE
    de.attachEvent('onclick', proxyLink)
  }

}

I've also create the following function to extend your hrefs to their absolute value based upon the current window.location. I'm never sure which browsers will return an absolute URL or the original href text, so this function is just incase the latter happens:

function makeHrefAbsoluteIfPossible( href ){
  var path;
  if ( href.indexOf(':') == -1 ) {
    if ( href.charAt(0) == '/' ) {
      path = href;
    }
    else {
      path = String(window.location.pathname);
      if ( path.indexOf('/') != -1 ) {
        path = path.substring(0,path.lastIndexOf('/')) + '/';
      }
      path += href;
    }
    return window.location.protocol +'://' +
      window.location.host + path;
  }
  return href;
}

Working example (with an alert instead of a redirect):

http://jsfiddle.net/teykz/2/

The benefits to this method are that it will work with applications that generate new html content during runtime... this most often happens with AJAX powered systems. Plus the links still appear as the original to the user (this can be desired depending on what you are doing).