CODEWITHSUNDEEP
javascriptjquery
Progonat
Progonat

Reputation: 158

Built relative URL in pages that are missing trailing slash /

We desperately need help with writing a small code that allows you to take the current page URL and the parameter in the href="parm" and create the link by joining the two with a slash.

The reason we need to do this is because we need relative links to the current page. The CMS system that we are working removes trailing slash from the end of URL.

Which is a problem because if you are at a page domain.com/fruit/apple

and create a link such as href="calories" or href="./calories" it will point to domain.com/fruit/calories

Instead, we want it to point to domain.com/fruit/apple/calories

Which is relative to the current page.

We don't want to change the way that our CMS works, therefore, the need JS solution.

Below you can see one example of what we are trying to accomplish but this only works on one link. 

<a href="home" id="relurl" target="_blank" title="This is a relative link!">link</a>

Start JS

var x = window.location.href; // Current page URL
var link = document.getElementById("relurl"); // store the element
var curHref = link.getAttribute('href'); // Get HREF paramter
link.setAttribute('href', x + "/"+ curHref);

End JS

The idea is to build relative links every time links with id="relurl" is used.

As per previous example this link: a href="home" id="relurl" target="_blank" title="This is a relative link!">link

at this page: domain.com/fruit/apple

it should point to domain.com/fruit/apple/home

Meaning the link structure is the currentpageURL + / + href

One page may have multiple relative links.

Thanks for any help.

Upvotes: 1

Views: 429

Answers (2)

anthonygood
anthonygood

Reputation: 410

This will update all links in the current page:

const updateNode = node =>
  node.href = `${window.location}/${node.href}`

document.querySelectorAll('a').forEach(updateNode)

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

While you could just use relative URLs in your links (with href="./page"), it sounds like the problem is that you are using duplicate IDs (which results in invalid markup). You can test that you have valid markup with the W3C Markup Validation Service.

When you have duplicate IDs, JavaScript only applies to the first element. This can be seen in the following:

var x = window.location.href; // Current page URL
var link = document.getElementById("relurl"); // store the element
var curHref = link.getAttribute('href'); // Get HREF paramter
link.setAttribute('href', x + "/" + curHref);
<a href="home" id="relurl" target="_blank" title="This is a relative link!">Working Link</a>
<br />
<a href="home" id="relurl" target="_blank" title="This is a relative link!">NOT Working</a>

To resolve this, you should use classes instead of IDs for your links. You can then use document.getElementsByClassName to select the elements. Remember that this returns a NodeList collection of elements, so you'll need to set the new URLs inside of a loop, as can be seen in the following:

var x = window.location.href; // Current page URL
var links = document.getElementsByClassName("relurl"); // store the elements
for (var i = 0; i < links.length; i++) {
  var curHref = links[i].getAttribute('href'); // Get HREF paramter
  links[i].setAttribute('href', x + "/" + curHref);
}
<a href="home" class="relurl" target="_blank" title="This is a relative link!">Working Link</a>
<br />
<a href="home" class="relurl" target="_blank" title="This is a relative link!">Another Working Link</a>

Hope this helps! :)

Upvotes: 1

Related Questions