This is a polyfill library for javascript's URLSearchParams class. This library has implemented all features from MDN document.
This library can use for both browsers and nodeJs.
Some browsers have native URLSearchParams class support, but not full. The new 2.x
version detects if browsers have full feature support and extends it.
This can also be installed with npm
.
$ npm install url-search-params-polyfill --save
For babel and es2015+, make sure to import the file:
import 'url-search-params-polyfill';
For es5:
require('url-search-params-polyfill');
For browser, copy the index.js
file to your project, and add a script
tag in your html:
<script src="index.js"></script>
Use URLSearchParams
directly. You can new
an object from a string or an object.
// 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);
var search = new URLSearchParams ();
search.append("id", 1);
search.delete("id");
search.get("id");
search.getAll("id");
search.has("id");
search.set("id", 2);
search.toString();
search.sort();
search.forEach(function (item) {
console.log(item);
});
for (var key of search.keys()) {
console.log(key);
}
for (var value of search.values()){
console.log(value);
}
for (var item of search) {
console.log('key: ' + item[0] + ', ' + 'value: ' + item[1]);
}
Use with fetch (#18)
Via fetch spec, when passing an 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 but no URLSearchParams
have no this behavior.
Via the data of caniuse, there are many browsers support fetch
but URLSearchParams
. They are:
Edge | Chrome | Opera | Samsung Internet | 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, like below (just an example):
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