How to Get URL Parameters with JavaScript [With Examples]

In this article, we’ll learn how to get URL parameters with Javascript and how to implement them using examples.

For getting the URL parameters, there are 2 ways:

  • By using the URLSearchParams Object
  • By using Separating and accessing each parameter pair

Method1: Using the URLSearchParams Object

The URLSearchParams interface provides methods for working with URLs. The parameters section of the URL is first split from the rest of the URL string.

The “?” separator is use with the split() method on the given URL. It will split the string into two sections. Only the parameters are use to pick the second portion. It is then pass to the URLSearchParams constructor.

This object’s entries() function returns an iterator containing the key/value pairs. The key component of the pair can then be recovered by looking up the first index, and the value can be found by looking up the second index. This can be use to retrieve all of the URL’s parameters, which can then be use as needed.

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. Paste the following code in an HTML file and see your browser console after clicking the button.

<!DOCTYPE html>
<html>

<head>
	<title>How To Get URL Parameters using JavaScript?</title>
</head>

<body>
	<h1 style="color: blue;">
		Softhunt.net
	</h1>
	<b>
		How To Get URL Parameters
		With JavaScript?
	</b>
	<p> The url used is:
    https://www.example.com/login.php?a=Softhunt.net&b=Welcome&c=To Our Website
	</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 =
"https://www.example.com/login.php?a=Softhunt.net&b=Welcome&c=To Our Website";
		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:

get URL parameters with Javascript img1

Method2: Separating and accessing each parameter pair

To retrieve only the parameters component of the query string, it is first separated. The “?” separator is use with the split() function on the provided URL. The URL will be split into two pieces, with the second half containing only the arguments. Using the split() function with “&” as the separator, this text is divides into arguments. This will create an array for each parameter string.

This array is looped through each of the keys, and the values are split using the separator “=”. The pairs will be separate into an array. The first index of the pair may be use to obtain the key component of the pair, while the second index can be use to retrieve the value. This may be used to get all of the URL’s arguments, which can then be utilized as needed.

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. Paste the following code in an HTML file and see your browser console after clicking the button.

<!DOCTYPE html>
<html>

<head>
	<title> How To Get URL Parameters using JavaScript? </title>
</head>

<body>
	<h1 style="color:blue;">
		Softhunt.net
	</h1> <b>
		How To Get URL Parameters
		With JavaScript?
	</b>
  <b>By Separating and accessing each parameter pair</b>
	<p> The url used is:
    https://www.example.com/login.php?a=Softhunt.net&b=Welcome&c=To Our Website
	</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 =
"https://www.example.com/login.php?a=Softhunt.net&b=Welcome&c=To Our Website";
		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:

img2

Conclusion of How to get URL parameters with JavaScript

That’s all for this article in this post you learn the basics of two methods to get URL parameters with examples. if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn

Suggested Articles:

  1. What is the Callback Function in JavaScript?
  2. How to Use Promise.all with Async/Await
  3. How to Promisify an Ajax Call?

Leave a Comment