0

I've got a link that exists on many pages, which I would like to use JavaScript to make the later part of the link to be changed according to the current url* of the visiting page.

(*current url mentioned here = the current web address appears on the browser's address bar)

What is the right way to change URL after ?redirect= to the current visiting URL using JavaScript?

For example, this is the original:

<a href="https://app.example.com/?redirect=www.example.com">Link</a>

Now, the current url is https://www.example.com/game?q=123, the desired result would be:

<a href="https://app.example.com/?redirect=https://www.example.com/game?q=123">Link</a>

Thanks a lot

Trying to learn from these posts, but was not successful yet...
how to replace part of the URL with JavaScript?
Get the current URL with JavaScript?
Replace a part of the current URL

Anthony
  • 123
  • 7
  • current URL is `document.URL`, `document.location` or `window.location` – Jaromanda X Aug 27 '22 at 05:59
  • Please clarify your question. Are you trying to change the `href` attribute of a (specific) anchor tag? Are you trying to change the address bar displayed link on the resulting page? Are you just trying to change the url itself in JavaScript? What is it exactly that you're trying to do? How do you identify your the element target if applicable? What have you tried yourself and did that produce any errors / undesirable results? – icecub Aug 27 '22 at 06:08
  • Sorry for the not being clear. @icecub I mean changing the href= of the links. – Anthony Aug 27 '22 at 06:09
  • @JaromandaX thanks, I mean to replace to the url that shows on the address bar of the browser. Is it window.location.href ? – Anthony Aug 27 '22 at 06:13
  • Is the example of the result that you wish to achieve or is it how the currently href attributes are looking? Like, are you trying to _change_ the already existing `?redirect=` parameter in the href attribute in your html code or are you just trying to add it to it? Like: `` or `` – icecub Aug 27 '22 at 06:19
  • There is no need for that at all, the server knows which url you came from, it's the Referer header – Lk77 Aug 27 '22 at 06:48
  • @icecub thanks, should be the later one in your comment. I revised the question to make it much more clear. Sorry for the inconvenience. – Anthony Aug 27 '22 at 07:03

1 Answers1

1

What I would do is get the href attribute from all anchor links. Create a new URL() object so you can work the url parameters. Replace the value and finally replace the href attribute with the result.

For example (explanation in comments):

// Make sure the document is loaded before you start working with it
document.addEventListener("DOMContentLoaded", function(e){
    // Get all anchor links present in the document and loop through them
    document.querySelectorAll("a").forEach(function(element){
        // Get the value of the href attribute
        const url_str = element.getAttribute("href");
        // Create a new URL object so we can work with it
        const url = new URL(url_str);

        // Check if the anchor tag should be affected or not
        if(url.searchParams.get('redirect')) {
          // Get the current url from the browser
          const current_url = window.location.href;
          // Set the redirect parameter to the value of current_url
          const redirect = url.searchParams.set("redirect", current_url);
          // Replace the href attribute with the new url
          element.setAttribute("href", url.href);
    
          // This is just to show it working. You can remove this.
          console.log(element.getAttribute("href"));
        }
    });
});
<a href="https://app.example.com/?redirect=www.example.com">Link</a>
<a href="https://app.example.com/?redirect=www.different.com">Link</a>
<a href="https://app.example.com/">Link</a>
icecub
  • 8,615
  • 6
  • 41
  • 70