Remove a Query String from a URL using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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 argument 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 doesn't 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 want to preserve the hash, 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 contains 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 doesn't 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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.