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.
URLSearchParams Polyfill ![](https://img.shields.io/npm/v/url-search-params-polyfill.svg)
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.
var search1 = new URLSearchParams();
var search2 = new URLSearchParams("id=1&from=home");
var search3 = new URLSearchParams({ id: 1, from: "home" });
var search4 = new URLSearchParams(window.location.search);
var search5 = new URLSearchParams(search2);
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