URL Parameters (also known as Query Parameters or Query String) are a set o key value pairs attached to the end of a URL. They are used to send small amounts of data from page to page, or from client to server via the URL.
TL;DR
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
// https://example.com/path/to/page?color=purple&size=M&size=L
urlParams.get('color') // purple
urlParams.getAll('size') // ['M', 'L']
URL Parameters Structure
The query parameters are separate from URL path with a ? (question mark):
https://example.com/path/to/page?color=purple
Each parameter after the first one is joined with an & (ampersand):
https://example.com/path/to/page?color=purple&size=M&size=L
In this case the query string is color=purple.
There are characters that cannot be part of a URL (for example space) and some other characters have a special meaning in a URL (the character #). This types of characters need to be encoded (for example space is encoded as %20).
Get a URL parameter
You can get the query string using window.location.search.
const queryString = window.location.search;
You can then parse the query string’s parameters using URLSearchParams:
const urlParams = new URLSearchParams(queryString);
Now you can use URLSearchParams.get() to get the first value associated with the given search parameter:
// https://example.com/path/to/page?color=purple&size=M&size=L
urlParams.get('color') // purple
urlParams.get('size') // M
urlParams.get('nothing') // empty string
Get all values of a URL parameter
Now you can use URLSearchParams.getAll() to get all values associated with the given search parameter:
// https://example.com/path/to/page?color=purple&size=M&size=L
urlParams.getAll('color') // ['purple']
urlParams.getAll('size') // ['M', 'L']
Check if a URL parameter exists
You can use URLSearchParams.has() to check if a given parameter exists.
// https://example.com/path/to/page?color=purple&size=M&size=L
urlParams.has('color') // true
urlParams.has('size') // true
urlParams.has('nothing') // false
Iterating over URL parameters
Iterate through all keys:
const keys = urlParams.keys();
for (const key of keys) {
console.log(key);
}
Iterate through all values:
const values = urlParams.values();
for (const value of values) {
console.log(value);
}
Iterate through all key/value pairs:
const entries = urlParams.entries();
for(const entry of entries) {
console.log(`${entry[0]} = ${entry[1]}`);
}
For Internet Explorer
The URLSearchParams is not suported on IE, so you will need to parse the URL and get the query parameters.
function getParameterByName(name) {
cont url = window.location.search;
name = name.replace(/[\[\]]/g, '\\$&');
let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
let results = regex.exec(url);
if (!results) {
return null;
}
if (!results[2]) {
return '';
}
return decodeURIComponent(results[2]);
}
Now you can use getParameterByName to get the first value associated with the given search parameter:
// https://example.com/path/to/page?color=purple&size=M&size=L
getParameterByName('color') // purple
getParameterByName('size') // M
getParameterByName('nothing') // null