How to get All URL Parameters with Javascript

This content originally appeared on DEV Community and was authored by rrtutors

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

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

*** More ***
How to groupby an array objects in Javascript

How do you parse JSON String with Javascript

This content originally appeared on DEV Community and was authored by rrtutors

Print Share Comment Cite Upload Translate Updates

APA

rrtutors | Sciencx (2021-09-10T11:29:34+00:00) How to get All URL Parameters with Javascript. Retrieved from https://www.scien.cx/2021/09/10/how-to-get-all-url-parameters-with-javascript/

MLA

" » How to get All URL Parameters with Javascript." rrtutors | Sciencx - Friday September 10, 2021, https://www.scien.cx/2021/09/10/how-to-get-all-url-parameters-with-javascript/

HARVARD

rrtutors | Sciencx Friday September 10, 2021 » How to get All URL Parameters with Javascript., viewed ,<https://www.scien.cx/2021/09/10/how-to-get-all-url-parameters-with-javascript/>

VANCOUVER

rrtutors | Sciencx - » How to get All URL Parameters with Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/10/how-to-get-all-url-parameters-with-javascript/

CHICAGO

" » How to get All URL Parameters with Javascript." rrtutors | Sciencx - Accessed . https://www.scien.cx/2021/09/10/how-to-get-all-url-parameters-with-javascript/

IEEE

" » How to get All URL Parameters with Javascript." rrtutors | Sciencx [Online]. Available: https://www.scien.cx/2021/09/10/how-to-get-all-url-parameters-with-javascript/. [Accessed: ]

rf:citation

» How to get All URL Parameters with Javascript | rrtutors | Sciencx | https://www.scien.cx/2021/09/10/how-to-get-all-url-parameters-with-javascript/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts