URLSearchParams is an API that provides various methods to retrieve and manage the values of query parameters in a URL. With the help of URLSearchParams interface, a developer doesn’t need to define a traditional regex to get the data in the URL query parameters.
The following code shows how to create a URLSearchParams object instance and get value from a query parameter:
//get the query string part from the URL
var queryString = window.location.search;
//pass the query string to the URLSearchParams() Constructor
var urlSearchParams = new URLSearchParams(queryString);
//get the value of the parameter - foo
var fooValue = urlSearchParams.get('foo');
Here, if the URL is ‘https://example.com?foo=1&bar=2&bar=3‘, the variable fooValue will have the value – 1. As simple as that!
Specification details of the URLSearchParams API
I) The Constructor
URLSearchParams() – Returns a URLSearchParams object instance.
II) Methods with usage examples
- get() – Returns the first value associated with the given search parameter.
urlSearchParams.get('bar'); //will return 2
2. getAll() – Returns all the values associated with a given search parameter.
urlSearchParams.getAll('bar'); //will return 2,3
3. append() – Appends a new key-value pair as a new search parameter.
urlSearchParams.append('baz', 4); appends baz parameter with the value 4
4. delete() – Deletes the given search parameter, and its associated value, from the list of all search parameters.
urlSearchParams.delete('bar'); //removes bar param(s) from the query string
5. forEach() – Iterates through all the params in the query string via a callback function.
urlSearchParams.forEach(function(value, key) {
console.log(value, key); //prints the key and value each time it occurs in
//the URL query string
});
6. entries() – Returns a key-value iterator to traverse through all key-value pairs.
for(var pair of urlSearchParams.entries()) {
console.log(pair[0]+ ', '+ pair[1]); //prints the key-value pairs
}
7. has() – Returns true or false depending upon the existence of a given parameter.
urlSearchParams.has('qux'); //will return false
8. keys() – Returns an iterator for keys.
for(var key of urlSearchParams.keys()) {
console.log(key); //prints the keys
}
9. values() – Returns an iterator for values.
for(var value of urlSearchParams.values()) {
console.log(value); //prints the values
}
10. toString() – Returns the query string which can be used in a URL.
urlSearchParams.toString();
11. sort() – Sorts the query string by the keys.
urlSearchParams.sort();
12. set() – Sets the value associated with a given search parameter to the given value. If there are several values, the others are deleted.
urlSearchParams.set('baz', 4); //adds baz as a new parameter
Point to note: Though it’s claimed that the URLSearchParams interface is compatible across all popular browsers except the Internet Explorer (not a surprise), it won’t be a bad idea to check and confirm first before deploying to production environments.