How to get URL Parameters using JavaScript ?

Method 1: Using the URLSearchParams Object: The URLSearchParams is an interface used to provide methods that can be used to work with an 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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]);
}

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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: 
        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 =
          
            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>

chevron_right


Output:



  • Browser Output:
    urlsearchparams
  • Console Output:
    urlsearchparams-console

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 key and values are separated by splitting with “=” as the separator. It will separate the pairs to 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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]);
}

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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: 
        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 =
          
            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>

chevron_right


Output:

  • Browser Output:
    using-split
  • Console Output:
    using-split-console

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.