Wondering what’s next for npm?Check out our public roadmap! »

    url-search-params-polyfill

    8.1.1 • Public • Published

    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:

    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

    Install

    npm i url-search-params-polyfill

    DownloadsWeekly Downloads

    402,593

    Version

    8.1.1

    License

    MIT

    Unpacked Size

    16.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar