How to Get URL Query Parameters with Javascript

Quick Sample Code

// given url string
let url_str = 'http://demo.com?id=100&cat=js';

let url = new URL(url_str);
let search_params = url.searchParams; 

// get value of "id" parameter
// "100"
console.log(search_params.get('id'));

How Are Url Parameters Read ?

To read parameters present in a url, we first create a new URL object from the given url string. The searchParams property of the created URL object is a URLSearchParams object.

The URLSearchParams object can then be used to access query parameters through its methods.

• forEach() method gets name-value pair of all parameters present.
• get() method gets value of a given parameter
• getAll() method gets all values of a multi-valued parameter
• has() method checks whether a given url parameter is present or not

Get Name & Value of All Present Parameters

Name-value pair of all parameters present in the url can be read through the forEach() method of URLSearchParams object.

// given url string
let url_str = 'http://demo.com?id=100&cat=js';

// create new URL object from the url string
let url = new URL(url_str);

// searchParams property is URLSearchParams object
let search_params = url.searchParams; 

// loop to get all query parameters
search_params.forEach(function(value, key) {
	console.log(key + '=' + value);
});

// "id=100"
// "cat=js"

Get Value of a Given Parameter

Value of a given parameter can be read through the get() method.

let url_str = 'http://demo.com?id=100&topic=main';
let url = new URL(url_str);
let search_params = url.searchParams; 

let id = search_params.get('id');
let topic = search_params.get('topic');

// "100"
console.log(id);

// "main"
console.log(topic);

Get All Values of a Multi-Valued Parameter

In case the parameter is multi-valued, the getAll() method can be used to get all values. This returns an array.

let url_str = 'http://demo.com?id=100&cat=js&cat=ui&cat=css';
let url = new URL(url_str);
let search_params = url.searchParams; 

let cat = search_params.getAll('cat');

// ["js", "ui", "css"]
console.log(cat);

Check Whether a Given Parameter is Present Or Not

The has() method can be used to check whether the parameter is contained in the url. It returns true if the parameter exists, otherwise it returns a false.

let url_str = 'http://demo.com?id=100&topic=main';
let url = new URL(url_str);
let search_params = url.searchParams; 

// true
if(search_params.has('id')) {
	// "100"
	console.log(search_params.get('id'))
}

Other Related FAQs

// current page url
let url_str = document.URL;

let url = new URL(url_str);
let search_params = url.searchParams;

// read url parameters now as described above