How to get the URL without any parameters in JavaScript?

Piece-by-piece URL construction

Let's break down the URL construction process. location.protocol, location.host and location.pathname are your trusty building blocks:

• location.protocol — the protocol scheme (like http: or https:)
• location.host — the hostname and port (such as example.com:80)
• location.pathname — the path on the server (like /index.html)

Joining these blocks together, we get the URL sans the parameters:

const protocol = location.protocol;
const host = location.host;
const path = location.pathname;
const mainUrl = `${protocol}//${host}${path}`;
console.log(mainUrl);  // lean and clean, no parameters to be seen


This is a straightforward method that relies only on native JavaScript.

Additional methods and quirks

The power of the URL object

JavaScript’s built-in URL object is a potent tool for parameter removal:

const url = new URL(window.location);
const baseUrl = url.origin + url.pathname;
console.log(baseUrl);  // stripped down to its birthday suit


This method standardizes the URL and makes it easier to handle even in more advanced use-cases.

Rosy with a chance of thorns: window.location.origin

Watch out for an oddity: window.location.origin. Mostly reliable, it may crack in older browsers. Ensure compatibility by assembling location.protocol and location.host:

const origin = `${location.protocol}//${location.host}`;
const baseUrl = `${origin}${location.pathname}`;
console.log(baseUrl);  // even your grandpa's browser can handle this


Embarrassing leftovers

And if you want a URL that blushingly ends with a ?, make sure to clean up after yourself:

const baseWithPotentialQuery = window.location.href.split('?')[0];
const cleanBaseUrl = baseWithPotentialQuery.endsWith('?') ? baseWithPotentialQuery.slice(0, -1) : baseWithPotentialQuery;
console.log(cleanBaseUrl);  // like you've never seen a query before


Tidbits: edge cases and tips

Tackle URL encoding

Parameters can be URL-encoded. To make them behave, use decodeURIComponent which treats even hostile special characters with warmth:

const decodedUrl = decodeURIComponent(window.location.href);
const cleanDecodedUrl = decodedUrl.split('?')[0];
console.log(cleanDecodedUrl);  // the decoding ring worked!


Third-party buffs

If your arsenal includes third-party libraries like URI.js, qs, or Lodash, they can flex their muscles for better URL operations:

// URI.js to the rescue
const cleanUri = URI(window.location.href).search("").toString();
console.log(cleanUri);  // Thank you, URI.js!


But remember, the right tool adds wonders, but the wrong one adds extra pounds. Balance is key.

Regular expressions to the rescue

For complex scenarios where URLs are ornate and parameters are only part of the variables, step up your game with regex solutions and northern advanced parsing techniques - they're kept up your sleeve for those cold winters.