7

How to get All URL Parameters with Javascript

 2 years ago
source link: https://dev.to/rrtutors/how-to-get-all-url-parameters-with-javascript-1ndb
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for How to get All URL Parameters with Javascript

How to get All URL Parameters with Javascript

Sep 10 Originally published at rrtutors.com

・2 min read

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 protected]
</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 protected]'
            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 protected]');
  </script>

</body>


</html>
Enter fullscreen modeExit fullscreen mode

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

How do you parse JSON String with Javascript


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK