Post
Ask Question

Query String Using JavaScript

Introduction

 
Query strings are used to retrieve information from the URL of pages, which can then be utilized for further functioning of the web application functionalities. Client-side also has its own set of helper methods and properties to help developers with that. In this article, we will have a look at the query string methods provided by JavaScript.
 
To begin with, let us assume we have this URL - www.awesomeearth.com?country=”Brazil”&day=1
 
In the above URL, we can see there are two query string parameters – “Country” and “Day”. Now, we will make use of two JavaScript methods to get their values from the URL
 

Search

 
This returns the current URL query strings after the “?”. For example, if the current URL is www.awesomeearth.com?country=”Brazil”, then the location.search will return the value as shown below.
 
var res = location.search
 
The value of res will be,
 
?country=”Brazil”
 

URLSearchParams()

 
This constructor has various methods to get the value(s) out of the Query Strings. This can parse the query string for all the query strings, check if a query string is present, etc.
 
Code
 
This is a basic HTML that demonstrates the usage of the query string using JavaScript.
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4.     <meta charset="UTF-8">    
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">    
  7.     <title>Query Strings</title>    
  8.     <script>    
  9.         function GetQueryStrings(){    
  10.             var _queryURL = window.location.search;    
  11.             alert("Value returned by location.search is URL is: " + _queryURL);    
  12.                 
  13.             var res = new  URLSearchParams(_queryURL);    
  14.             alert("Value returned by URLSearchParams is: " + res);    
  15.                 
  16.             var _country  = res.get("country");    
  17.             alert("The value of country is: " + _country);    
  18.     
  19.         }    
  20.     </script>    
  21. </head>    
  22. <body>    
  23.        
  24.     <button onclick="GetQueryStrings()">Get Query Strings</button>    
  25.         
  26. </body>    
  27. </html>   

Usage

 
To make the above code work, make sure that you add some query strings for testing it out beforehand. For instance, once the HTML is loaded, the URL will be somewhat like -file:///C:/Users/sapaul/Desktop/QueryStrings.html
 
Add the query string for the country with some value. The final URL will be somewhat like this - file:///C:/Users/sapaul/Desktop/QueryStrings.html?country=Brazil
 
The button click will then take care of the demo.
 
Illustration
  • The strings after the “?” in the URL is captured by location.search
  • The variable “_res” then extract the Query String component.
  • The method URLSearchParams.get(“QueryPropertyName”) then returns the value of the Query String

Further Reading

 
There are various other useful methods associated with URLSearchParams that might be of great value. A few of them are explained below.
 
Method
URL
Output
URLSearchParams.getAll(“country”)
www.demo.com/QueryStrings.html?country=brazil&country=Bhutan
Brazil, Bhutan
URLSearchParams.has("country")
www.demo.com/QueryStrings.html?country=brazil&code=12
TRUE
URLSearchParams.delete("country")
www.demo.com/QueryStrings.html?country=brazil&code=12
code=12
URLSearchParams.append("continent", "Africa")
www.demo.com/QueryStrings.html?country=brazil&code=12
code=12&continent=Africa
 
The code snippets and demo files can be found on my GitHub profile.
 
References


Similar Articles