URLSearchParams Sample

Available in Chrome 49+ | View on GitHub | Browse Samples

Background

The URLSearchParams spec defines an interface and convenience methods for working with the query string of a URL (e.g. everything after "?"). This means no more regex'ing and string splitting URLs!

A URLSearchParams object can be used directly in a for...of block.

Basic example

let url = new URL('https://example.com?foo=1&bar=2'); // or construct from window.location

let params = new URLSearchParams(url.search.slice(1));

for (let p of params) {
  console.log(p);
}

params.set('baz', 3);
console.log(params.has('baz'));

params.append('foo', 4);
console.log(params.getAll('foo'));

console.log(params.toString());

// Also can choose to update the page's URL.
// window.history.replaceState({}, '', '/?' + params);

Live Output

The URL constructor integrates with URLSearchParams by adding a read-only property, .searchParams:

// Note: .searchParams is currently not implemented in Chrome 49.
let url = new URL('https://example.com?foo=1&bar=2');
console.log(url.searchParams.get('foo')); // === 1

Live Demo

Below, you can manipulate the URL of this page by changing the parameter name to get/set values. The URL will update using the URLSearchParams and window.history API.