How to get URL Parameters using JavaScript ?
Last Updated :
26 Dec, 2023
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:
- 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:
Share your thoughts in the comments
Please Login to comment...