To get a query string you can access the search property of the location object:

Code language: CSS (css)

Assuming that the value of the location.search is:

Code language: JavaScript (javascript)

To work with the query string, you can use the URLSearchParams object.

Code language: JavaScript (javascript)

The URLSearchParams is an iterable object, therefore you can use the for...of structure to iterate over its elements which are query string parameters:

Code language: JavaScript (javascript)

Output:

Code language: CSS (css)

Useful URLSearchParams methods

The URLSearchParams has some useful methods that return iterators of parameter keys, values, and entries:

• keys() returns an iterator that iterates over the parameter keys.
• values() returns an iterator that iterates over the parameter values.
• entries() returns an iterator that iterates over the (key, value) pairs of the parameters.

keys() example

The following example uses the keys() method to list all parameter names of a query string:

Code language: JavaScript (javascript)

Output:

values() example

The following example uses the keys() method to list all parameter values of a query string:

Code language: JavaScript (javascript)

Output:

Code language: PHP (php)

entries() example

The following example uses the entries() method to list all pairs of parameter key/value of a query string:

Code language: JavaScript (javascript)

Output:

Code language: JSON / JSON with Comments (json)

Check if a query string parameter exists

The URLSearchParams.has() method returns true if a parameter with a specified name exists.

Code language: JavaScript (javascript)

Output

Code language: JavaScript (javascript)

Summary

• The URLSearchParams provides an interface to work with query string parameters
• The URLSearchParams is an iterable so you can use the for...of construct to iterate over query string parameters.
• The has() method of the URLSearchParams determines if a parameter with a specified name exists.