Skip to main content

How to Remove the Query String from a URL in JavaScript

When processing URLs in JavaScript, a common task is to "clean" them by removing the query string (the part starting with ?). This is useful for standardizing URLs before logging them, using the base URL as a cache key, or simply for display purposes.

This guide will demonstrate the modern, most robust method for this task using the built-in URL object. We will also cover a simpler, string-based method using split() for quick and simple cases, while explaining its limitations.

The URL object is a modern, built-in interface in JavaScript designed to parse and manipulate URLs safely and correctly. It is the recommended best practice for any URL manipulation task.

For example, you have a full URL and need to get the "clean" version without the query string.

// Problem: Remove '?page=10' from this URL.
const fullUrl = 'https://example.com/books?page=10#section-3';

Solution:

  1. Create a new URL() object from the URL string.
  2. Set its search property to an empty string.
  3. Convert the object back to a string.
function removeQueryString(url) {
  const urlObject = new URL(url);
  urlObject.search = ''; // This removes the query string.
  return urlObject.toString();
}

// Example Usage:
const fullUrl = 'https://example.com/books?page=10#section-3';
const cleanUrl = removeQueryString(fullUrl);

console.log(cleanUrl);
// Output: https://example.com/books#section-3
note

This method correctly removes the query string while preserving the hash (#section-3).

Removing Both the Query String and Hash​

The URL object also makes it trivial to remove the hash (fragment) portion of the URL by setting the hash property to an empty string.

Solution:

function removeQueryAndHash(url) {
  const urlObject = new URL(url);
  urlObject.search = ''; // Remove query string
  urlObject.hash = '';   // Remove hash
  return urlObject.toString();
}

// Example Usage:
const fullUrl = 'https://example.com/books?page=10#section-3';
const cleanUrl = removeQueryAndHash(fullUrl);

console.log(cleanUrl);
// Output: https://example.com/books

The String-Based Method: split()​

For a quick and simple operation where you don't need the full power of the URL object, you can use String.prototype.split(). This method is less robust but can be effective for simple cases.

The logic:

  • The split('?') method will break the URL string into an array of substrings, using the question mark as the separator. The part of the URL before the query string will always be the first element in the resulting array.

Solution:

function removeQueryString(url) {
  return url.split('?')[0];
}

// Example Usage:
const fullUrl = 'https://example.com/books?page=10#section-3';
const cleanUrl = removeQueryString(fullUrl);

console.log(cleanUrl);
// Output: https://example.com/books
note

Limitation: This simple split() method also removes the hash, which may not be the desired behavior. It is also less safe than the URL object, as it can be fooled by URLs where a question mark appears in an unexpected place.

How the URL Object Works​

When you create a new URL(urlString), the browser's engine parses the string into its constituent parts, which you can then access as properties.

const urlString = 'https://example.com:8080/books?page=10#section-3';
const urlObject = new URL(urlString);

console.log(urlObject.protocol); // Output: 'https:'
console.log(urlObject.hostname); // Output: 'example.com'
console.log(urlObject.port);     // Output: '8080'
console.log(urlObject.pathname); // Output: '/books'
console.log(urlObject.search);   // Output: '?page=10'
console.log(urlObject.hash);     // Output: '#section-3'
note

By modifying these properties (like setting urlObject.search = ''), you are changing the internal state of the object. Calling .toString() or accessing the .href property reassembles these parts into a new, valid URL string. This makes it a much safer and more predictable way to manipulate URLs than manual string parsing.

Conclusion​

When you need to remove the query string from a URL, you have two main options with a clear winner.

  • The URL object is the overwhelmingly recommended best practice. It is a purpose-built API for URL manipulation that correctly handles all parts of a URL, including the query string (search) and hash (hash).
  • The string.split('?')[0] method is a quick but "dirty" alternative. It is acceptable for simple, one-off cases but is less robust and may have unintended side effects, like removing the hash.

For any professional or production-level code, always use the URL object for its reliability and power.

Table of Contents