In this article, we will learn how to get the URL parameters in Javascript, along with understanding their implementation through the examples.
For getting the URL parameters, there are 2 ways:
Method 1: Using the URLSearchParams Object
- The URLSearchParams is an interface used to provide methods that can be used to work with a URL.
- The URL string is first separated to get only the parameters portion of the URL. The split() method is used on the given URL with the “?” separator.
- It will separate the string into 2 parts. The second part is selected with only the parameters. It is then passed to the URLSearchParams constructor.
- The entries() method of this object returns an iterator with the key/value pairs.
- The key part of the pair can then be retrieved by accessing the first index of the pair and the value can be retrieved by accessing the second index.
- This can be used to get all the parameters in the URL which can be used as required.
Syntax:
let paramString = urlString.split('?')[1];
let queryString = new URLSearchParams(paramString);
for (let pair of queryString.entries()) {
console.log("Key is: " + pair[0]);
console.log("Value is: " + pair[1]);
}
Example: This example illustrates the use of the URLSearchParams Object to get the URL parameter.
HTML
<!DOCTYPE html><html>
<head>
<title>
How To Get URL Parameters using JavaScript?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<b>
How To Get URL Parameters
With JavaScript?
</b>
<p> The url used is:
</p>
<p>
Click on the button to get the url
parameters in the console.
</p>
<button onclick="getParameters()"> Get URL parameters </button>
<script>
function getParameters() {
let urlString =
let paramString = urlString.split('?')[1];
let queryString = new URLSearchParams(paramString);
for(let pair of queryString.entries()) {
console.log("Key is:" + pair[0]);
console.log("Value is:" + pair[1]);
}
}
</script>
</body>
</html>
|
Output:
entries() Method
Method 2: Separating and accessing each parameter pair
- The query string is first separated to get only the parameters portion of the string.
- The split() method is used on the given URL with the “?” separator. This will separate the URL into 2 parts and the second part is selected with only the parameters.
- This string is separated into the parameters by using the split() method again with “&” as the separator. This will separate each parameter string into an array.
- This array is looped through each of the keys and values are separated by splitting with “=” as the separator. It will separate the pairs into an array.
- The key part of the pair can be retrieved by accessing the first index of the pair and the value can be retrieved by accessing the second index.
- This can be used to get all the parameters in the URL which can be used as required.
Syntax:
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
for (let i = 0; i < params_arr.length; i++) {
let pair = params_arr[i].split('=');
console.log("Key is:", pair[0]);
console.log("Value is:", pair[1]);
}
Example: This example illustrates the Separate access for each parameter pair.
HTML
<!DOCTYPE html><html>
<head>
<title>
How To Get URL Parameters using JavaScript?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1> <b>
How To Get URL Parameters
With JavaScript?
</b>
<p> The url used is:
</p>
<p>
Click on the button to get the url
parameters in the console.
</p>
<button onclick="getParameters()"> Get URL parameters </button>
<script>
function getParameters() {
let urlString =
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
for(let i = 0; i < params_arr.length; i++) {
let pair = params_arr[i].split('=');
console.log("Key is:" + pair[0]);
console.log("Value is:" + pair[1]);
}
}
</script>
</body>
</html>
|
Output: