How can I set or append different base hrefs to different links with JavaScript?

Question

I want to reduce clutter in my web page code by setting multiple base hrefs for hyperlinks. Links with the same base hrefs also have the same CSS classes. Using JavaScript, is there a way to append base hrefs to the relative links? It's very difficult to explain, but here's an example:

<a class="blue" href="sad1.html">Sad 1</a>
<a class="blue" href="sad2.html">Sad 2</a>
<a class="red" href="angry1.html">Angry 1</a>
<a class="red" href="angry2.html">Angry 2</a>

I want to append one base href to all the links with a blue class, and a different base href for all the links with a red class. I'll actually have several more classes in the document, but I can finish the code if someone can provide a working sample. My page has hundreds of links, which I update often, so I need the html as trim as possible. I'm solid on HTML and CSS, but I'm still trying to learn JavaScript. Thanks.

Answer 1

 function absolutizeHref(klass, base) { var nodes = document.querySelectorAll("." + klass + "[href]"); Array.prototype.forEach.call(nodes, function(node) { var href = node.getAttribute("href"); node.setAttribute("href", base + href); }); } document.addEventListener("DOMContentLoaded", function(event) { absolutizeHref("blue", "http://example.com/blue/"); absolutizeHref("red", "http://example.com/red/"); }); 

 <a class="blue" href="sad1.html">Sad 1</a> <a class="blue" href="sad2.html">Sad 2</a> <a class="red" href="angry1.html">Angry 1</a> <a class="red" href="angry2.html">Angry 2</a> 

Answer 2

Just to give you an idea. Something like this:

 var links = document.querySelectorAll('a'); for(var i = 0; i < links.length; i++) { links[i].href = links[i].className + links[i].pathname; } 

 <a class="blue" href="sad1.html">Sad 1</a> <a class="blue" href="sad2.html">Sad 2</a> <a class="red" href="angry1.html">Angry 1</a> <a class="red" href="angry2.html">Angry 2</a> 

Update after re-reading the question and didn't notice this line at the first time so much..

I want to append one base href to all the links with a blue class, and a different base href for all the links with a red class.

To stick with the idea it is still quiet simple

 var links = {}; links.blue = document.querySelectorAll('a.blue'); links.blue.myPath = '/custom/blue/path'; links.red = document.querySelectorAll('a.red'); links.red.myPath = '/custom/red/path'; for (var key in links) { for(var i = 0; i < links[key].length; i++) { links[key][i].href = links[key].myPath + links[key][i].pathname; } } 

 <a class="blue" href="sad1.html">Sad 1</a> <a class="blue" href="sad2.html">Sad 2</a> <a class="red" href="angry1.html">Angry 1</a> <a class="red" href="angry2.html">Angry 2</a> 

Answer 3

Another answer here has offered the core-js solution for this.

If you are happy to use jQuery, jQuery will provided the cleanest solution for you.

If you aren't comfortable with jQuery, but are open to using it, a quickstart guide can be found here

Here's an example of solving this in jQuery. The elegance of this solution, is that all you need to do to expand it is add a key value pair to classToPrefixMap:

 var classToPrefixMap = { green: '/path/to/green/', blue: '/path/to/blue/' }; for(var key in classToPrefixMap) { $('.' + key).each(function(index, anchor) { $(anchor).attr('href', classToPrefixMap[key] + $(anchor).attr('href')); }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="green" href="one.jpg">One</a> <a class="green" href="two.jpg">Two</a> <a class="blue" href="three.jpg">Three</a> <a class="blue" href="four.jpg">Four</a>