How to Use URLSearchParams in JavaScript

URLSearchParams is a JavaScript API that allows users to retrieve and work with data in the URL query parameters. Learn how to use it.

Written by K. Jagathish
Published on Apr. 01, 2024
How to Use URLSearchParams in JavaScript
Image: Shutterstock / Built In
Brand Studio Logo

The URLSearchParams API provides a way to retrieve and work with the data in the URL query parameters. Here’s everything you need to know about how it works and how to use it in JavaScript

12 URLSearchParams Methods

  1. Get
  2. GetAll
  3. Has
  4. toString
  5. Append
  6. Set
  7. Entries
  8. Keys
  9. Values
  10. forEach
  11. Sort
  12. Delete
A URLSearchParams cheat sheet.
A URLSearchParams cheat sheet. | Image: K. Jagathish

 

3 Ways to Create URLSearchParams Objects

We can create a URLSearchParams object in three different ways.

 

1. Using URL Object

The first way is to use the URL object.

let url= new URL('https://javascriptjeep.com?mode=night&page=2');
let params = new URLSearchParams(url.search);

 

2. Using Query String

The second method is using a query string:

params = new URLSearchParams("mode=night&page=2");
// you can also have only query string
var params = new URLSearchParams("?mode=night&page=2");

 

3. Using Entry

The third method is using entry:

params= new URLSearchParams([["mode", "night"],["page", "2"]]);
//pass object
params = new URLSearchParams({mode: "night", page : "2"});

More on JavaScriptHow to Find Values in a JavaScript Array

 

12 URLSearchParams Methods

In this section we’ll cover 12 ways to use URLSearchParams. For each example, we’ll be using the URL:

let url= new URL('https://test.com?mode=night&page=2&mode=day');

let params = new URLSearchParams(url.search);

 

1. Get 

Get allows you to get the first value associated from the given search parameter. If the param isn’t found then null will be returned.

let mode = params.get('mode'); // night
let time = params.get('time'); // null

 

2. GetAll

getAll retrieves all the values of the search parameter as an array.

let modes = params.getAll('mode'); //  ["night", "day"]

 

3. Has

has checks if a parameter with the specified name exists:

let hasMode = params.has('mode'); //true
let hasTime = params.has('time'); //false

 

4. toString

toString will print the query string:

params.toString(); //mode=night&page=2&mode=day

 

5. Append

The append method appends a new key-value to the search params.

params.append('tag', "js"); 
params.toString(); //mode=night&page=2&mode=day&tag=js

If the same key is appended multiple times, it will appear in the parameter string multiple times for each value.

params.append('tag', "tricks");
params.toString(); //mode=night&page=2&mode=day&tag=js&tag=tricks

 

6. set

Sets the value of the search parameter to the given value.

params.set('page', 3);
params.toString(); // mode=night&page=3&mode=day&tag=js&tag=tricks

If there were several matching values, this method deletes the others.

params.set('tag', "javascript")
params.toString(); // mode=night&page=3&mode=day&tag=javascript

If the search parameter doesn’t exist, this method creates it.

params.set('n',"J") //mode=night&page=3&mode=day&tag=javascript&n=J

 

7. entries

entries returns an iterator allowing iteration through all key/value pairs.

console.log(...params.entries()); 
// you can also use in loop
for(var [key, value] of params.entries()) {
   console.log(key+ ' => '+ value); 
}
mode => night
page => 3
mode => day
tag => javascript
n => j

 

8. keys

keys returns an iterator for keys of the search params.

console.log(...params.keys()); // mode page mode tag n

 

9. values

values returns an iterator for values of the search params.

console.log(...params.values()); // night 3 day javascript j

 

10. forEach

Using forEach, you can loop through the params.

params.forEach(function(value, key) {
  console.log(key,  value);
});

 

11. sort

sort sorts the key/value pairs.

params.sort();
params.toString();// mode=night&mode=day&n=j&page=3&tag=javascript
A tutorial on URLSearchParams in JavaScript. | Video: WebStylePress

More on JavaScriptHow to Use the Array FindIndex Method

 

12 . Delete

This deletes the given search parameter and all its associated values from the list of all search parameters.

params.delete('mode');
params.toString(); // name=Jeep&page=3&tag=javascript
Hiring Now
Adyen
Fintech • Payments • Financial Services
SHARE