Tip: Edit URL Parameters in JavaScript

JavaScript, String · Dec 7, 2022

Editing the query string of a URL in JavaScript is pretty common. While the naive approach of directly editing the URL as a string often works, it's a fragile solution that can break easily. This is especially true when working with encoding, hash fragments and other such intricacies.

The most robust way to go about editing a URL is using the URL interface to parse the original URL string and edit it as necessary. This way, the browser will take care of all the complicated details and make the code easier to read and maintain.

const urlString = 'https://mysite.com?p=42&from=home#details';
const url = new URL(urlString);

// Delete a parameter
const removedParam = 'from';
url.searchParams.delete(removedParam);

// Edit/add parameters
const newParams = {
  p: 57,
  track: 'none'
};
Object.keys(newParams).forEach(key => {
  url.searchParams.set(key, newParams[key]);
});

// Edit the hash fragment
const newHash = 'new';
url.hash = newHash;

console.log(`${url}`); // https://mysite.com?p=57&track=none#new

As you can see in the example, the URL interface provides a number of methods to edit the URL. The most commonly used ones are URL.searchParams and URL.hash. The former is a URLSearchParams object that provides methods to edit the query string of the URL, while the latter is a string that contains the hash fragment of the URL. Apart from these two, the URL interface also provides methods to edit the protocol, host, port, path, etc. of the URL.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • URLs in JavaScript

    Snippet collection

    Working with URLs is an essential skill for web developers. This snippet collection covers all the necessary resources to master URLs in JavaScript.

  • Get base URL

    JavaScript, String

    Gets the current URL without any parameters or fragment identifiers.

  • CSV to JSON

    JavaScript, String

    Converts a comma-separated values (CSV) string to a 2D array of objects. The first row of the string is used as the title row.

  • Escape HTML

    JavaScript, String

    Escapes a string for use in HTML.