URLSearchParams Polyfill

This is a polyfill library for JavaScript's URLSearchParams class.

Features

• Implemented all features from MDN document.
• Can use for both browsers and Node.js.
• Detect if browsers have full support for URLSearchParams and extend it
• Compatible with IE8 and above

Installation

This can also be installed with npm.

1$ npm install url-search-params-polyfill --save

For Babel and ES2015+, make sure to import the file:

1import 'url-search-params-polyfill';

For ES5:

1require('url-search-params-polyfill');

For browser, copy the index.js file to your project, and add a script tag in your html:

1<script src="index.js"></script>

Usage

Use URLSearchParams directly. You can instantiate a new instance of URLSearchParams from a string or an object.

1// new an empty object
2var search1 = new URLSearchParams();
3
4// from a string
5var search2 = new URLSearchParams("id=1&from=home");
6
7// from an object
8var search3 = new URLSearchParams({ id: 1, from: "home" });
9
10// from location.search, will remove first "?" automatically
11var search4 = new URLSearchParams(window.location.search);
12
13// from anther URLSearchParams object
14var search5 = new URLSearchParams(search2);
15
16// from a sequence
17var search6 = new URLSearchParams([["foo", 1], ["bar", 2]]);

append

1var search = new URLSearchParams();
2
3search.append("id", 1);

delete

1search.delete("id");

get

1search.get("id");

getAll

1search.getAll("id");

has

1search.has("id");

set

1search.set("id", 2);

toString

1search.toString();

sort

1search.sort();

forEach

1search.forEach(function (item) {
2  console.log(item);
3});

keys

1for (var key of search.keys()) {
2  console.log(key);
3}

values

1for (var value of search.values()) {
2  console.log(value);
3}

for...of

1for (var item of search) {
2  console.log('key: ' + item[0] + ', ' + 'value: ' + item[1]);
3}

size

1console.log(search.size)

Known Issues

Use with fetch (#18)

Via fetch spec, when passing a URLSearchParams object as a request body, the request should add a header with Content-Type: application/x-www-form-urlencoded; charset=UTF-8, but browsers which have fetch support and not URLSearchParams support do not have this behavior.

Via the data of caniuse, there are many browsers which support fetch but not URLSearchParams:

Edge	Chrome	Opera	Samsung Internet	QQ	Baidu
14 - 16	40 - 48	27 - 35	4	1.2	7.12

If you want to be compatible with these browsers, you should add a Content-Type header manually:

1function myFetch(url, { headers = {}, body }) {
2    headers = headers instanceof Headers ? headers : new Headers(headers);
3    
4    if (body instanceof URLSearchParams) {
5        headers.set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
6    }
7    
8    fetch(url, {
9        headers,
10        body
11    });
12}

LICENSE

MIT license