How to get All URL Parameters with Javascript

Last updated Jun 29, 2021

In this Javascript example we will cover how to read all url parameters from the URL. To do this we will use URLSearchParams. URLSearchParams is an interface which will provide methods to get the parameters.

First we will split the given url with delimeter '?' by passing the spilt() method

urlString.split('?')

Get all parameters from URL using Javascript

Here is the example to get all the parameters from the url

!DOCTYPE html>
<html>

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

    <style>
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

 td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

 tr:nth-child(even){background-color: #f2f2f2;}

 tr:hover {background-color: #ddd;}

 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>

<body>
<h1 style="color:green;">
    RRTutors
</h1>

<b>
    How To Get All URL Parameters
    With JavaScript?
</b>

<p>
    We will fetch all parameters from this url
    http://rrtutors.com/page?language=Javascript&subject=urlfetch&email=email@gmail.com
</p>

<p>
    Click on the button to get all the
    url parameters.
</p>
<div id="container">
</div>

<button onclick="getParameters()">
    Get URL parameters
</button>
<script>

function getParameters() {

         let urlString= 'http://rrtutors.com/page?language=Javascript&subject=urlfetch&email=email@gmail.com'
            let paramString = urlString.split('?')[1];

            let queryString = new URLSearchParams(paramString);

        let data='<table><tr><th>Key</th><th>Value</th></tr>';
            for (let pair of queryString.entries()) {

         data+='<tr><td>'+pair[0]+'</td><td>'+pair[1]+'</td></tr>';
                console.log("Key is:" + pair[0] +"And values is: "+pair[1]);

            }
         let ele = document.getElementById('container');
        ele.innerHTML += data;
        }
  //getParameters('http://rrtutors.com/page?language=Javascript&subject=urlfetch&email=email@gmail.com');
  </script>

</body>

</html>

Article Contributed By :

1275 Views

Projects By category