Easily manipulate URL s with URLSearchParams

The first personal website of this article, permanent address: https://tie.pub/2019/05/easy-... , welcome to subscribe.

The URLSearchParams API provides a consistency interface and URL fragments, and is used to query strings (that is, the part after the address "?).

Previously, developers used regular expressions and string segmentation to obtain query parameters for URL s. If we keep doing this honestly, it's not interesting.
It's boring and often accompanied by mistakes. One of my dark magic is that I reuse the same get|set|removeURLParameter in multiple large Google.com applications Help method , which contains Google Santa Tracker and Google I/O 2015 web

Now there is a better API to do this!

URLSearchParams API

Try demo

URLSearchParams in Chrome 49 is through URL specification API to handle URL query parameters.
I think URLSearchParams is to URls what FormData is to forms.

So will you use it? Give you a URL string, and you can easily get the parameter value:

// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');

params.get('q') === 'search string';
params.get('version') === '1';
Array.from(params).length === 3;

If a parameter has multiple values, the get method returns only the first value. Iteration parameters:

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

Use set to set a new parameter value:

params.set('version', 2);

If a parameter has more than one value, all other parameters with the same parameter name are deleted.

Use append to add a new value for an existing parameter:

params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim'];

Use delete to delete a parameter:

params.delete('person');
params.getAll('person') === [];

In this example, all query values in the URL named person will be deleted, not just the first one.

Use with URL

Most of the time, we may use the full URL address and modify the URL parameters of the application. URL The construction method can be easily used:

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);

params.has('baz') === true;
params.toString() === 'foo=1&bar=2&baz=3';

To modify the URL address, you can get the parameters, update their values, and then use history.replaceState to update the URL.

// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);

window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0

I used ES6 here Template string Re update the URL address of the app.

Integrate URL usage elsewhere

By default, FormData is used in the fetch() API request body. URLSearchParams provides a POST data substitute if you need it.

const params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
  method: 'POST',
  body: params
}).then(...)

Although Chrome has not yet implemented it, URLSearchParams can still be used with URL constructor integration and a tag. Both provide a read-only property. searchParams query parameter support:

const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';

The. searchParams attribute is provided as a link:

const a = document.createElement('a');
a.href = 'https://example.com?filter=api';

// a.searchParams.get('filter') === 'api';

Feature detection and browser support

Currently, Chrome 49, Firefox 44 and Opera 36 support URLSearchParams.

if ('URLSearchParams' in window) {
  // Browser supports URLSearchParams
}

In order to use it in unsupported browsers, it is recommended to use https://github.com/ungap/url-search-params.

demonstration

attempt Example!

To view the use of URLSearchParams in real applications, please check Polymer's material design Iconset Generator.
I use it to initialize Status of deep links.

Programming VIP