How to Get URL Query Parameters with Javascript

javascript
Published on June 11, 2018

Query parameters in a url can be read in Javascript using the URL and URLSearchParams objects.

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

How to get parameters of the current page ?

The document.URL property gives the current url of the browser window. Parameters in the url can then be read in the same way as described above.

// 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
How to change (edit, add or delete) parameters in a url ?

The URLSearchParams object also has methods to edit, add or delete parameters in a url.

Read How to Change URL Query Parameters with Javascript for more details.

What is the browser support for URLSearchParams ?

All modern browsers — Firefox, Chrome, Edge & Safari support URLSearchParams.

Related Tutorials
How to Change URL Query Parameters with Javascript
Reading a URL and its Parts with Javascript
Comments
Loading Comments