How to Remove the Query String from a URL in JavaScript

# Table of Contents

1. Remove the Query String from a URL in JavaScript
2. Remove the query string and hash from a URL in JavaScript
3. Remove the query string from a URL using split()
4. Remove the query string from a URL using indexOf()

# Remove the Query String from a URL in JavaScript

To remove the query string from a URL:

1. Use the URL() constructor to create a URL object.
2. Set the search property on the URL object to an empty string.
3. Use the toString() method to convert the URL object to a string.

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

urlObj.search = '';

const result = urlObj.toString();

// 👇️ https://bobbyhadz.com/books#hash
console.log(result);

The URL() constructor returns a newly created URL object that represents the URL it got passed as a parameter.

You can use the search property on the URL object to access or update the query string.

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

console.log(urlObj.search); // 👉️ ?page=10

The search property returns a string containing a ? followed by the parameters of the URL.

You can remove the query string from the URL by setting the search property to an empty string.

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

urlObj.search = '';

const result = urlObj.toString();

// 👇️ https://bobbyhadz.com/books#hash
console.log(result);

The URL.toString() method returns a string containing the whole URL.

If you have to do this often, define a reusable function.

Copied!
function removeQueryString(url) {
  const urlObj = new URL(url);

  urlObj.search = '';

  return urlObj.toString();
}

const url = 'https://bobbyhadz.com/books?page=10#hash';

const result = removeQueryString(url);
console.log(result); // 👉️ https://bobbyhadz.com/books#hash

The function takes a URL as a parameter and removes the query string from the URL.

# Remove the query string and hash from a URL in JavaScript

You can use the same approach to remove the hash from the URL.

Simply set the hash property on the URL object to an empty string.

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

urlObj.search = '';
urlObj.hash = '';

const result = urlObj.toString();

// 👇️ https://bobbyhadz.com/books
console.log(result);

The URL.hash property is a string containing a # followed by the fragment identifier of the URL

The property can be used to access or set the hash.

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

console.log(urlObj.hash); // 👉️ #hash

Setting the hash property to an empty string removes it from the URL, just like setting the search property removes the query string.

# Remove the query string from a URL using split()

This is a three-step process:

1. Use the split() method to split the string on a question mark.
2. Access the array element at index 0.
3. The first element is the part of the URL before the query string.

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

const result = url.split('?')[0];
console.log(result); // 👉️ "https://bobbyhadz.com/books"

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

The String.split() method takes the following 2 parameters:

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

// 👇️ ['https://bobbyhadz.com/books', 'page=10#hash']
console.log(url.split('?'));

This solution also handles the scenario where the URL doesn't contain a query string.

Copied!
const url = 'https://bobbyhadz.com/books';

const result = url.split('?')[0];
console.log(result); // 👉️ "https://bobbyhadz.com/books"

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.

# Remove the query string from a URL using indexOf()

This is a two-step process:

1. Use the indexOf() method to get the index of the question mark in the string.
2. Use the slice() method to get the part of the string before the question mark.

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

const result = url.slice(0, url.indexOf('?'));
console.log(result); // 👉️ "https://bobbyhadz.com/books"

The String.slice() method extracts a section of a string and returns it, without modifying the original string.

The String.slice() method takes the following arguments:

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

Copied!
const url = 'https://bobbyhadz.com/books';

let result = url;

if (url.includes('?')) {
  result = url.slice(0, url.indexOf('?'));
}

console.log(result); // 👉️ "https://bobbyhadz.com/books"

Our if statement handles the condition where the URL doesn't contain a query string.

# Remove the query string but preserve the hash

If you need to remove the query string but want to preserve the hash, concatenate two calls to the slice method.

Copied!
const url = 'https://bobbyhadz.com/books?page=10#hash';

const result = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#'));

console.log(result); // 👉️ "https://bobbyhadz.com/books#hash"

The first call to the slice() method gets the part of the URL before the query string.

The second call contains the string from the hash onwards.

When only a single argument is passed to the String.slice() method, the slice goes to the end of the string.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Convert Object to Query String and vice versa in JavaScript
• How to Check if a URL has Query Parameters in JavaScript
• Failed to execute 'removeChild' on 'Node' error in JS
• Get protocol, domain, port, path, query & Hash using JS
• Get the YouTube video ID from a URL using JavaScript