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 Core Method (Recommended): The URL Object

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

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

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'

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.