Remove a Querystring from a URL using JavaScript

avatar

Borislav Hadzhiev

Fri Nov 19 20212 min read

Remove a Querystring from a URL in JavaScript #

To remove a querystring from a url, use the split() method to split the string on a question mark and access the array element at index 0, e.g. url.split('?')[0]. The split method will return an array containing 2 substrings, where the first element is the url before the querystring.

index.js
const url = 'https://example.com/books?page=10#hash'; // โœ… Remove querystring const result1 = url.split('?')[0]; console.log(result1); // ๐Ÿ‘‰๏ธ "https://example.com/books" // โœ… Remove querystring const result2 = url.slice(0, url.indexOf('?')); console.log(result2); // ๐Ÿ‘‰๏ธ "https://example.com/books" // โœ… Preserve hash const index = url.indexOf('?'); const result3 = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#')); console.log(result3); // ๐Ÿ‘‰๏ธ "https://example.com/books#hash"

The only parameter we passed to the String.split method is the separator on which we want to split the string.

index.js
const url = 'https://example.com/books?page=10#hash'; // ๐Ÿ‘‡๏ธ ['https://example.com/books', 'page=10#hash'] console.log(url.split('?'));

The method returns an array containing 2 strings - the one before, and the one after the question mark.

This solution also handles the scenario, where the url does not contain a querystring.

index.js
const url = 'https://example.com/books'; // ๐Ÿ‘‡๏ธ ['https://example.com/books'] console.log(url.split('?'));

If you pass a substring that is not contained in the string, the split() method returns an array containing the entire string.

An alternative approach is to use the String.indexOf method to get the index of the question mark.

To remove a querystring from a url, call the slice() method on the url and get the characters from index 0, up to the index of the question mark in the string. The slice method will return a new string that doesn't contain the querystring.

index.js
const url = 'https://example.com/books?page=10#hash'; const result2 = url.slice(0, url.indexOf('?')); console.log(result2); // ๐Ÿ‘‰๏ธ "https://example.com/books"

The 2 parameters we passed to the String.slice method are:

  1. start index - the index of the first character to be included in the string
  2. end index - go up to, but not including this index
The indexOf method returns the index of the first occurrence of a substring in the string, and -1 if the substring is not contained in the string.

This is a potential edge case that you need to handle if you pick this approach.

index.js
const url = 'https://example.com/books'; let result2 = url; if (url.includes('?')) { result2 = url.slice(0, url.indexOf('?')); } console.log(result2); // ๐Ÿ‘‰๏ธ "https://example.com/books"

Our if statement handles the condition where the url does not contain a query string.

If you need to remove the querystring, but preserve the hash, you can concatenate two calls to the slice method.
index.js
const url = 'https://example.com/books?page=10#hash'; // // โœ… Preserve hash const result3 = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#')); console.log(result3); // ๐Ÿ‘‰๏ธ "https://example.com/books#hash"

The first call to the slice method gets the part of the url before the querystring.

The second call includes the string from the hash onwards.

If you pass a single parameter to the slice method, it includes the characters to the end of the string.

You might need to handle the scenario, where the url does not contain a querystring or hash.
index.js
const url = 'https://example.com/books?page=10#hash'; let result3 = url; if (url.includes('?') && url.includes('#')) { result3 = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#')); } console.log(result3);

In this example, we only reassign the result3 variable, if the URL contains a querystring and a hash, otherwise we return the url as is.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee