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. This library has implemented all features from MDN document.

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 new an object from a string or an object.

// new a 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];
}

LICENSE

MIT license