Relative URL to a different port number in a hyperlink?

Manipulate port number using JavaScript

For a living, breathing and dynamic web experience, often you need a flexible solution. Using JavaScript to construct URLs, port numbers can be altered onthefly. Here it is:

document.addEventListener('DOMContentLoaded', function() {
  var links = document.querySelectorAll('a.change-port');
  links.forEach(function(link) {
    // When you click the link, magic happens!
    link.addEventListener('click', function(event) {
      event.preventDefault();
      let newPort = 8080; // Choose the port wisely, young padawan!
      window.location.href = 
        window.location.protocol + '//' +
        window.location.hostname + ':' + 
        newPort + 
        event.target.getAttribute('href');
    });
  });
});


<a href="/path" class="change-port">Go to Port 8080</a>


This crafty script listens for the click event on hyperlinks, overrules default behavior, and redirects the user to the URL built from endpoint's hostname and path, but coupled with a different port number.

Optimize user experience

When you decide to maneuver URLs with JavaScript, always care about user experience:

1. Transparent Change: It's like a magician showing the trick before it happens - show the revised URL when users hover over a link or do a right-click to copy the link address.
2. Seamless Switch: Give a smoother transition to users, apply changes after the page has loaded.
3. Cross-browser Compatibility: Make sure the magic trick works on every table. Verify your magic trick across multiple web browsers for uniform experience.

Navigating without heavy scripting

For maintaining high accessibility and user experience, URL construction should not heavily rely on JavaScript, Knight of Coding:

• On Initial Load: Ideally, the links should be perfect when the page first loads. JavaScript could then be used as an enhancement, not a mere constructor.
• Progressive Enhancement: Even when JavaScript is turned off or fails, the user should still be capable of navigating the site, although on their default ports.

Get hands dirty with code

There are various scenarios that may arise, and understanding them with code examples can help you better navigate the situation:

1. Hover and Change Ports: Attach mouseover event to modify href attribute such that users see the amended port number on hover.
2. Event Handling Delegate: Assign the listening of events to a common parent instead of attaching handlers to each link which provides efficient performance.
3. Absolute vs Relative Links: A function that discerns between a link being absolute or relative and builds the URL accordingly.
4. Special Characters: Ensure any peculiar characters in URL paths are encoded to evade any transmission issues.