September 27, 2021

How to Get URL Parameter Value in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get URL parameter value in javascript. URL parameters are also known as query parameters. These query parameters help the server to fetch and deliver relevant data to the user.

The URL parameters are added after the “?” symbol and you can add as many URL parameters you want in the URL but you must separate each query parameter with the “&” symbol.

There are numerous ways to get the values of URL parameters. Most of them involve the usage of regex, but we are going to use URL() and URLSearchParams() constructors to accomplish our goal.

In the following example, we have one URL with some query parameters. In the input field, we will enter the name of the query parameter. Upon click of a button, we will get its value from the URL and display it on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, button, input, and h1). The div element is just a wrapper for the rest of the elements.
We are using style attribute with div element to center align all the elements horizontally.
The innerText for the button element is “Get” and for the h1 element, it is “Display Here”.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div style="text-align: center">
        <input type="text" placeholder="Enter Param">
        <button>GET</button>
        <h1>Display Here</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

Javascript

We have one URL with query parameters and it is assigned to the urlString variable.
We have selected the button element, input element, and h1 element using the document.querySelector() method and stored them in btnGet, input, and display variables respectively.
We have attached the click event listener to the button element.
In the event handler function, we are using a URL() constructor and passing our URL string as a parameter. This will return a URL object and we are storing that in the url variable.
We need to extract the query string from the URL. For that reason, we are using the search property of the URL object. This returns the query string along with the “?” symbol. To get rid of the “?” symbol, we are using the slice() method and passing 1 as a parameter. The final query string is stored in the searchString variable.
We are using the URLSearchParams() interface and passing searchString as a parameter. It returns an object and we are storing that in the searchParams variable.
We are getting value from the input element using value property and storing it in the inputParam variable.
The object returned by the URLSearchParams() interface contains has() method. This method takes a string as a parameter and returns a Boolean value. It checks whether the query parameter with a specified name exists or not.
If True, then we will get the value of the query parameter by using the get() method and display it in the h1 element using the innerText property.
If False, then we will display “Wrong Param” in the h1 element.

let urlString = 'http://www.example.com/xyz.php?user=peter&age=27&country=usa';

let btnGet = document.querySelector('button');
let input = document.querySelector('input');
let display = document.querySelector('h1');

btnGet.addEventListener('click', () =>{
    let url = new URL(urlString);
    let searchString = url.search.slice(1);    
    let searchParams = new URLSearchParams(searchString);
    let inputParam = input.value;

    if(searchParams.has(inputParam)){
        display.innerText = searchParams.get(inputParam);
    }else {
        display.innerText = 'Wrong Param';
    }
});

You May Also Like: