Is there any method to get the URL without query string?

Stripping off hashes

Got a # anchor in your URL? No worries! We can slice that off too:

const hashFreeURL = window.location.href.split(/[?#]/)[0];


This will chop off everything post ? or # – quite a handy trick for single-page applications that use hash-based routing, right?

One-liner solution

Because sometimes, simplicity is key! Here's a one-liner:

const rawURL = location.toString().replace(location.search, "");


The location.search contains the query part, which we replace with an empty string, effectively sterilizing the URL.

Dynamic URLs: handled!

URLs can get really funky with various elements like:

• Extra parameters (&key=value)
• Hashes or anchors (#section)
• Trailing slashes

Not all heroes wear capes; some just handle dynamic URLs!

const sanitizedURL = window.location.href.split('?')[0].split('#')[0];


Best practices, tips and tricks

Old habits die hard, but it's time to let go of document.location.href. The window.location is the future! It's reliable and consistent across different browsers and environments.

For those who like to play around, try out the URL and URLSearchParams APIs for more precise URL manipulation.

Untangling the edge cases

Not all URLs are created equal. Look out for the tricky ones:

• Internationalized domain names
• URL-encoded parameters
• JavaScript running in non-window environments (like Node.js)

Decode your internationalized domain names with encodeURI() and decodeURI(). URL-encoded parameters are tricksters. Be careful not to decode them unintentionally. Node.js enthusiasts, try url-parse to simulate browser-like URL behavior.

Do it secure and right

No one likes messy code, and everyone hates vulnerabilities. Use standard APIs and test. Test again!

For Content Security Policies (CSP) advocates, make sure you don't violate them while playing with your URLs.

Utility functions can save your day

Here, create a small utility function:

function getBaseURL(urlString) {
    const url = new URL(urlString);
    // Light as a feather
    return `${url.origin}${url.pathname}`;
}


This keeps your code efficient and readable. And as they say, readability counts!