The url-search-params-polyfill package is a polyfill for the URLSearchParams interface, which allows you to work with the query string of a URL. This package is particularly useful for environments that do not support the URLSearchParams natively, such as older browsers.

What are url-search-params-polyfill's main functionalities?

Creating URLSearchParams

This feature allows you to create a new URLSearchParams object from a query string. The code sample demonstrates how to initialize the URLSearchParams with a query string.

const params = new URLSearchParams('key1=value1&key2=value2');

Appending Parameters

This feature allows you to append new key-value pairs to the URLSearchParams object. The code sample shows how to add a new parameter to the URLSearchParams.

const params = new URLSearchParams();
params.append('key', 'value');

Getting Parameter Values

This feature allows you to retrieve the value of a specific parameter from the URLSearchParams object. The code sample demonstrates how to get the value associated with a specific key.

const params = new URLSearchParams('key1=value1&key2=value2');
const value = params.get('key1');

Deleting Parameters

This feature allows you to delete a specific parameter from the URLSearchParams object. The code sample shows how to remove a parameter by its key.

const params = new URLSearchParams('key1=value1&key2=value2');
params.delete('key1');

Iterating Over Parameters

This feature allows you to iterate over all key-value pairs in the URLSearchParams object. The code sample demonstrates how to use a for...of loop to log each key-value pair.

const params = new URLSearchParams('key1=value1&key2=value2');
for (const [key, value] of params) {
  console.log(key, value);
}

Other packages similar to url-search-params-polyfill

Readme

Source

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

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

Keywords

FAQs

What is url-search-params-polyfill?

Is url-search-params-polyfill well maintained?

Last updated on 27 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

url-search-params-polyfill