How to use JavaScript variable in an HTML link

Question

The website that I am working on has a tag point to a different URL than the one that the website has. What I would like to do is get around the

Answer 1

First, if you're not using base yet or are but can switch away from using it, please read:

Is it recommended to use the html tag?

Which will give you many good reasons to think twice. Moral of the story: It's usually a bad idea to use base. There are good reasons, and it is useful; I have used it to great delight many times when working with designers to have local copies of the markup that I can work with but still maintain connections back into the site's assets. But for production sites, it's too clever by half.

Also, this answer was originally written for a different question that was an exact duplicate, so I'm posting this here, although there's an answer that's very similar to it already.

---

Do you have control over the markup or can you use a selector to get only the elements you want to effect? You could:

HTML (Note the class truelink.)

    

        True Link1
    
    

        True Link2
    
    

        True Link3
    

Javascript

​window.addEventListener('load', function links(){
    var base = document.getElementsByTagName('base')[0],
        links = document.getElementsByClassName('truelink'),
        l = links.length,
        uri = 'http://www.host.tld/path?query=test';

    console.log('Base:', base, ', True Links:', links);

    console.log('Modifying links in five seconds...');

    setTimeout(function go(){
        console.log('Modifying links now...');

        while (l--){
            links[l].href = links[l].href.replace(base.href, uri);
        }

        console.log('Base: ', base, 'True Links: ', links);
    }, 5000);
});​

http://jsfiddle.net/M5Hdk/

Keep in mind that this technique demonstrates using document.getElementsByClassName, which is not supported by IE until version 9. If you have to support lower versions than IE9, see Jeremy J Starcher's answer for a less "efficient" but better supported method. There's also document.querySelectorAll, which is supported by IE8 and above and all other major browsers. If you only need to support IE8, I would suggest using this to select your links over the method Jeremy demonstrates.

I also delay the change for five seconds so you can see it work. Obviously, this won't be necessary for you (most likely).

The only thing I'm not sure about right now is whether or not my .replace() will always find the base.href to replace in all browsers, so it may be better to detect the presence of a relative url before doing a replace, so you can do whatever else appropriately. For some related background on this possible "issue", see my question that deals with how browsers handle href attributes differently in the DOM:

Method for selecting elements in Sizzle using fully-qualified URLs

Also, this will perhaps work most seamlessly if it falls in an inline script tag right after the content, or at the end of body tag, in which case you will want to remove the window.addEventListener part and replace with a self-executing function.

Their are other options, all are probably a little more problematic:

• Blow away the base tag altogether. If you do this, though, you'll first want to check if you need to manually insert the base.href content into the links, otherwise I'm sure things can break or become brittle.
• Add an event listener to the a links you want to use your true link and manipulate it that way onclick, just don't forget to return false at the end of the click handler function, so the browser doesn't follow the link. This is probably the most seamless method, but is probably not best for all situations.
• Probably others.

Be sure to test with real world markup. base is a mildly quirky tool, so manhandling it may lead to unusual side effects. You were warned.