How to Get URL Parameters with JavaScript

John on September 07, 2020

URL parameters are used to send data server-side in a key-value pair format in an HTTP GET or POST request. Sometimes you will need to get URL parameter information client-side for your JavaScript program.

In this tutorial, we will learn how to get URL parameters with JavaScript and look at some of the different ways we can work with them.

A typical URL with parameters for an HTTP GET search query might look something like this:

https://example.com?search=eggs&type=food&active=1

Get the URL Parameters

There is no built-in JavaScript utility for directly getting URL parameters so we will have to grab them ourselves before doing anything else. We can do this by storing window.location.search as a variable.

var query = window.location.search;
console.log(query);

?search=eggs&type=food&active=1

Using the URLSearchParams Interface

Now we have the URL parameter string set as a variable we can turn it into an object of the URLSearchParams interface.

var paramters = new URLSearchParams(query);

URLSearchParams is designed to make working with URL parameters easy. Let's get the value of the parameter search from the example above using the URLSearchParams.get() method.

var searchParam = paramters.get('search');
console.log(searchParam);

eggs

Check a URL Parameter Exists with the URLSearchParams.has() has Method

To check if a parameter exists we can use the URLSearchParams.has() method in an if statement.

//?search=eggs&type=food&active=1

if (paramters.has('oranges')) {
 console.log(true);
} else {
 console.log(false);
}

false

Get all Values with the Same Parameter Name

Let's say we had a query string with three parameters called category. To get all both the category values and put them in an array we can use the URLSearchParams.getAll() method and pass the name of the parameter inside the () (parenthesis).

// var query = ?search=eggs&type=food&active=1&category=1&category=2&category=3

var query = window.location.search;
var paramters = new URLSearchParams(query);

var category_value_array = paramters.getAll('category');

console.log(category_value_array);

["1", "2", "3"]

Iterate over URL Parameters

It is possible to iterate over the keys, values and entires of a URLSearchParams object. Let's have a look at some examples of this in action.

// var query = ?search=eggs&type=food&active=1&category=1&category=2&category=3

var query = window.location.search;
var paramters = new URLSearchParams(query);

var keys = paramters.keys();
var values = paramters.values();
var entries = paramters.entries();

for (let k of keys) {
 console.log(k);
}

search
type
active
[3]category

for (let v of values) {
 console.log(v);
}

eggs
food
[2] 1
2
3

for (let e of entries) {
 console.log(e);
}

["search", "eggs"]
["type", "food"]
["active", "1"]
["category", "1"]
["category", "2"]
["category", "3"]

All the Methods Available in the URLSearchParams interface

For reference here are all the methods available on the URLSearchParams interface for working with parameter objects.

• URLSearchParams.append() - append key/value pair as a new search parameter.
• URLSearchParams.delete() - delete a specified search parameter and its value
• URLSearchParams.entries() - returns an iterable key/value list of all parameters
• URLSearchParams.forEach() - iterate through all values
• URLSearchParams.get() - get value by parameter name
• URLSearchParams.getAll() - get all the values by parameter name
• URLSearchParams.has() - check a parameter exists. returns true or false
• URLSearchParams.keys() - gets an iterable list of parameters
• URLSearchParams.set() - set a value to a parameter name
• URLSearchParams.sort() - sorts list by key name
• URLSearchParams.toString() - to string
• URLSearchParams.values() - gets an iterable list of values

Conclusion

You now know how to get URL parameters and work with them using JavaScript.