How to get URL Parameters using JavaScript ?
Last Updated :
13 Sep, 2024
To get URL parameters using JavaScript means extracting the query string values from a URL. URL parameters, found after the ? in a URL, pass data like search terms or user information. JavaScript can parse these parameters, allowing you to programmatically access or manipulate their values.
For getting the URL parameters, there are 2 ways:
Method 1: Using the URLSearchParams Object
The URLSearchParams interface provides methods to work with URL parameters. After splitting the URL with ?, the parameters part is passed to URLSearchParams(). Using entries(), you retrieve key/value pairs, allowing access to all URL parameters for further use.
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: In this example we retrieves URL parameters using JavaScript. It splits the URL, extracts parameters with URLSearchParams(), and logs each key-value pair to the console when the button is clicked.
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:
https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks
</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=GeeksforGeeks&b=500&c=Hello Geeks";
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() MethodMethod 2: Separating and accessing each parameter pair
The URL’s query string is split at ? to isolate parameters. Using split("&") divides parameters into an array. Looping through this array, each key-value pair is split by =, giving keys at the first index and values at the second, enabling parameter extraction.
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: In this example we retrieves URL parameters by splitting the URL string manually. It extracts each key-value pair, splits them, and logs the results in the console when the button is clicked.
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:
https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks
</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=GeeksforGeeks&b=500&c=Hello Geeks";
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:

Similar Reads
How to parse URL using JavaScript ? Given an URL and the task is to parse that URL and retrieve all the related data using JavaScript. Example: URL: https://www.geeksforgeeks.org/courses When we parse the above URL then we can find hostname: geeksforgeeks.com path: /courses Method 1: In this method, we will use createElement() method
2 min read
How to Get the Current URL using JavaScript? Here are two different methods to get the current URL in JavaScript.1. Using Document.URL PropertyThe DOM URL property in HTML is used to return a string that contains the complete URL of the current document. The string also includes the HTTP protocol such as ( http://).Syntaxdocument.URLReturn Val
1 min read
How To Get URL And URL Parts In JavaScript? In web development, working with URLs is a common task. Whether we need to extract parts of a URL or manipulate the URL for navigation, JavaScript provides multiple approaches to access and modify URL parts. we will explore different approaches to retrieve the full URL and its various components.The
3 min read
How to get the file name from page URL using JavaScript ? JavaScript provides multiple techniques for string manipulation and pattern matching. By demonstrating various methods, the article equips developers with versatile solutions to dynamically retrieve and utilize file names from different URL formats within their applications. There are several approa
3 min read
How to retrieve GET parameters from JavaScript ? In order to know the parameters, those are passed by the âGETâ method, like sometimes we pass the Email-id, Password, and other details. For that purpose, We are using the following snippet of code. When you visit any website, ever thought about what the question mark '?' is doing in the address bar
2 min read
How to Extract the Host Name from URL using JavaScript? Extracting the hostname from a URL using JavaScript means retrieving the domain part from a complete web address. This can be done using JavaScript's URL object or methods like window.location, which allow easy access to the hostname of a URL.What is URL?A URL (Uniform Resource Locator) is the web a
2 min read
How to Create Query Parameters in JavaScript ? Creating query parameters in JavaScript involves appending key-value pairs to a URL after the `?` character. This process is essential for passing data to web servers via URLs, enabling dynamic and interactive web applications through GET requests and URL manipulation. Example: Input: {'website':'ge
3 min read
How to add a parameter to the URL in JavaScript ? Given a URL the task is to add parameter (name & value) to the URL using JavaScript. URL.searchParams: This read-only property of the URL interface returns a URLSearchParams object providing access to the GET-decoded query arguments in the URL. Table of Content Using the append methodUsing set m
2 min read
Convert URL parameters to a JavaScript Object Given an URL with parameters, The task is to get those parameters and convert them to a JavaScript Object using javascript. we're going to discuss a few techniques. Below is the following method to convert URL parameters to a JavaScript Object: Using replace() MethodUsing split() MethodUsing for ...
2 min read
How To Get The URL Parameters Using AngularJS? In AngularJS, retrieving URL parameters is essential for managing dynamic content and user interactions based on the URL state. In this article, we'll learn various approaches to achieve this.Table of ContentApproach 1: Using ActivatedRoute ServiceApproach 2: Using Router ServiceApproach 3: Using UR
3 min read