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:

Table of Content

Using the URLSearchParams Object
Separating and accessing each parameter pair

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:

Method 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>