Available in Chrome 49+ | View on GitHub | Browse Samples
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.
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);
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
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.