How to change the target of any local link when clicked, using javascript / jquery?

Question

I need to change the href of any local link when it is clicked on. I've worked out how to select the correct links and create the new url, but not sure how to change the location. I need to be certain that any other click events have also run, so I can't just change the location immediately.

var my_host = 'example.com';
$(document).click(function(e) {
    if(e.target.hostname == my_host)
    {
        alert(e.target.protocol + "//" + e.target.hostname + "/#" + e.target.pathname + e.target.search);
        //...
    }
});

This is related to my earlier question.

Answer 1

You can bind the event on your local links like this and use the attr method to change the href:

$('a[href*="yourdomain.com"]').click(function(){
  // your code before changing href
  $(this).attr('href', 'new url here');
});

Replace yourdomain.com with your own domain so that the above code only targets your local links.

Answer 2

This is completely untested, but should get you where you're going:

var site = "http://yourdomain.com";

// Match anchor tags with an href value that starts with your
// site URL, or that start with / which are relative URLs (also
// your site).
$('a[href^="' + site + '"] a[href^="/"]').click(function(){
    var url = $(this).attr('href');
    if (url.indexOf(site) != -1) {
        url = site + "/#" + url.replace(site, ""); // Quick dirty way to get the path component of the URL
    } else {
        url = "/#" + url;
    }
    $(this).attr("href", url);
});

Note that I read your other question, and I personally don't understand why you would do this on a click event, instead of just replacing all the href values as soon as the page is loaded.

Answer 3

Credit to Sarfraz: here is the answer without the bug.

var my_host = "example.com";
$('a[href^="/"], a[href^="http://' + my_host + '"], a[href^="https://' + my_host + '"]').click(function(e){
    $(this).attr('href', e.target.protocol + "//" + e.target.hostname + "/#" + e.target.pathname + e.target.search);
});