usp

url-search-params-polyfill

a simple polyfill for javascript URLSearchParams

Showing:

Popularity

Downloads/wk

406K

GitHub Stars

547

Maintenance

Last Commit

5mos ago

Contributors

12

Package

Dependencies

0

Size (min+gzip)

1.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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:

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

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:

EdgeChromeOperaSamsung InternetQQBaidu
14 - 1640 - 4827 - 3541.27.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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial