a simple polyfill for javascript URLSearchParams
npm install url-search-params-polyfillThis is a polyfill library for JavaScript's URLSearchParams class.
* 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
This can also be installed with npm.
``sh`
$ npm install url-search-params-polyfill --save
For Babel and ES2015+, make sure to import the file:
`javascript`
import 'url-search-params-polyfill';
For ES5:
`javascript`
require('url-search-params-polyfill');
For browser, copy the index.js file to your project, and add a script tag in your html:
`html`
Use URLSearchParams directly. You can instantiate a new instance of URLSearchParams from a string or an object.
`javascript
// new an empty object
var search1 = new URLSearchParams();
// from a string
var search2 = new URLSearchParams("id=1&from=home");
// from an object
var search3 = new URLSearchParams({ id: 1, from: "home" });
// from location.search, will remove first "?" automatically
var search4 = new URLSearchParams(window.location.search);
// from anther URLSearchParams object
var search5 = new URLSearchParams(search2);
// from a sequence
var search6 = new URLSearchParams([["foo", 1], ["bar", 2]]);
`
`javascript
var search = new URLSearchParams();
search.append("id", 1);
`
`javascript`
search.delete("id");
`javascript`
search.get("id");
`javascript`
search.getAll("id");
`javascript`
search.has("id");
`javascript`
search.set("id", 2);
`javascript`
search.toString();
`javascript`
search.sort();
`javascript`
search.forEach(function (item) {
console.log(item);
});
`javascript`
for (var key of search.keys()) {
console.log(key);
}
`javascript`
for (var value of search.values()) {
console.log(value);
}
`javascript`
for (var item of search) {
console.log('key: ' + item[0] + ', ' + 'value: ' + item[1]);
}
javascript
console.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:`js
function myFetch(url, { headers = {}, body }) {
headers = headers instanceof Headers ? headers : new Headers(headers);
if (body instanceof URLSearchParams) {
headers.set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
}
fetch(url, {
headers,
body
});
}
``MIT license