url-search-params-polyfill

What is url-search-params-polyfill?

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

query-string

The query-string package provides utilities for parsing and stringifying URL query strings. It offers a more feature-rich API compared to url-search-params-polyfill, including support for nested objects and array values.

qs

The qs package is a query string parser with support for nested objects, arrays, and other advanced features. It is more powerful and flexible than url-search-params-polyfill, making it suitable for complex query string manipulations.

url-parse

The url-parse package is a lightweight URL parser that includes support for query string parsing and manipulation. It provides a comprehensive API for working with URLs and their components, including query strings.

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

size

console.log(search.size)

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