Need help with url-search-params-polyfill?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jerrybendy
506 Stars 74 Forks MIT License 60 Commits 5 Opened issues

Description

a simple polyfill for javascript URLSearchParams

Services available

!
?

Need anything else?

Contributors list

No Data

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
.
$ 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:

Usage

Use

URLSearchParams
directly. You can instantiate a new instance of
URLSearchParams
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);

// from a sequence var search6 = new URLSearchParams([["foo", 1], ["bar", 2]]);

append

var search = new URLSearchParams();

search.append("id", 1);

delete

search.delete("id");

get

search.get("id");

getAll

search.getAll("id");

has

search.has("id");

set

search.set("id", 2);

toString

search.toString();

sort

search.sort();

forEach

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

keys

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

values

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

for...of

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

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:
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
});

}

LICENSE

MIT license

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.