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

I am working on the assumption that your real case is more complex than your example. If it isn't, then review the other answers, which may be more appropriate for what you need to do.

What this will do is...

1. Run on the window load event a function that will...
2. Find every element in the DOM that is an A tag, and...
3. Loop through those found A tags and check if the element has an enhance class, and if so...
4. Split the href at the # to get the current a element's hash value, which we will...

5. Combine it with the following:

   '//' + location.host + location.pathname;
   

   Giving us the current page's URL without a hash or query string. If you want the query string (what's after the ? in a URL), add location.search:

   '//' + location.host + location.pathname + location.search;
   

Note, the // part is protocol relative, so it will use whatever the base href's protocol is, e.g., http or https. You may want to specify that, however.

Markup

Note the class attribute, which we will use to identify which a tags to manipulate.

    

        Link 1 - 
        No enhance class, should be subject to BASE HREF: 
        » http://example.com#link1
    
    

        Link 2 - 
        Has enhance class, should be:
        » http://fiddle.jshell.net/_display/#link2
    
    

        Link 3 - 
        Has enhance class, should be:
        » http://fiddle.jshell.net/_display/#link3
    
    

        Link 4 - 
        Has enhance class, should be:
        » http://fiddle.jshell.net/_display/#link4
    
​

Javascript

//--
// window.onload is not preferred, window.addEventListener
// should be used. Except that only IE9 supports it, and
// IE8 and lower do not support it, and uses window.attachEvent
// instead, which you can test for. 
//
// I'm using window.onload here simply as a shortcut method and
// for clarity. This can also go in a script tag at the bottom
// of the body tag, in which case you can remove window.onload
// and use a self-calling anonymous function like:
//
//     (function updateLinks(){... all the same as below ...})();
//
// This will ensure you are out of the global variable scope.
//--
window.onload = function updateLinks() {
    //--
    // Modern browsers can use document.getElementsByClassName
    // or you can use a shiv script to add it to browsers that 
    // don't. I'll do it the "manual" way here, and this works
    // cross-browser. The downside is that it will interate 
    // through every A tag on the page, looking for the "small"
    // few that have the el.className we're looking for here.
    //--
    var els = document.getElementsByTagName("a"),
        l = els.length,
        trueURL = '//' + location.host + pathname,
        i, el, hash;

    for (i = 0; i < l; i++) {
        el = els[i];

        if (el.className.indexOf("enhance") != -1) {
            hash = el.href.split('#');
            el.href = trueURL + "#" + hash[1];
        }
    }
};

http://jsfiddle.net/userdude/unnH8/

Mouseover the links to see the current setting. As always, thoroughly test with real markup in multiple browsers.