How to get All URL Parameters with Javascript
Last updated Jun 29, 2021In 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.
Understanding URL Parameters
URL parameters are key-value pairs appended to a URL after a question mark (?
). They're commonly used to pass data between pages, like search queries, filters, or user preferences.
Method 1: Using the URLSearchParams Object (Modern Approach)
The URLSearchParams
object provides a straightforward way to work with URL parameters. Here's how to use it:
const urlParams = new URLSearchParams(window.location.search); // Get all parameters as key-value pairs: // Get a specific parameter value: |
Method 2: Manual Parsing (Older Approach)
First we will split the given url with delimeter '?' by passing the spilt() method
urlString.split('?')
|
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 :
|
|
|
|
1520 Views |