Open In App

How to get URL Parameters using JavaScript ?

Last Updated : 26 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to get the URL parameters in Javascript, along with understanding their implementation through the examples.

For getting the URL parameters, there are 2 ways:

Method 1: Using the URLSearchParams Object

  • The URLSearchParams is an interface used to provide methods that can be used to work with a URL.
  • The URL string is first separated to get only the parameters portion of the URL. The split() method is used on the given URL with the “?” separator.
  • It will separate the string into 2 parts. The second part is selected with only the parameters. It is then passed to the URLSearchParams constructor.
  • The entries() method of this object returns an iterator with the key/value pairs.
  • The key part of the pair can then be retrieved by accessing the first index of the pair and the value can be retrieved by accessing the second index.
  • This can be used to get all the parameters in the URL which can be used as required.

Syntax:

let paramString = urlString.split('?')[1];
let queryString = new URLSearchParams(paramString);
for (let pair of queryString.entries()) {
console.log("Key is: " + pair[0]);
console.log("Value is: " + pair[1]);
}

Example: This example illustrates the use of the URLSearchParams Object to get the URL parameter.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
          How To Get URL Parameters using JavaScript?
      </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <b>
        How To Get URL Parameters
        With JavaScript?
    </b>
    <p> The url used is:
    </p>
 
    <p>
       Click on the button to get the url
       parameters in the console.
    </p>
 
    <button onclick="getParameters()"> Get URL parameters </button>
    <script>
    function getParameters() {
        let urlString =
        let paramString = urlString.split('?')[1];
        let queryString = new URLSearchParams(paramString);
        for(let pair of queryString.entries()) {
            console.log("Key is:" + pair[0]);
            console.log("Value is:" + pair[1]);
        }
    }
    </script>
</body>
</html>


Output:

 entries() Method

Method 2: Separating and accessing each parameter pair

  • The query string is first separated to get only the parameters portion of the string.
  • The split() method is used on the given URL with the “?” separator. This will separate the URL into 2 parts and the second part is selected with only the parameters.
  • This string is separated into the parameters by using the split() method again with “&” as the separator. This will separate each parameter string into an array.
  • This array is looped through each of the keys and values are separated by splitting with “=” as the separator. It will separate the pairs into an array.
  • The key part of the pair can be retrieved by accessing the first index of the pair and the value can be retrieved by accessing the second index.
  • This can be used to get all the parameters in the URL which can be used as required.

Syntax:

let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
for (let i = 0; i < params_arr.length; i++) {
let pair = params_arr[i].split('=');
console.log("Key is:", pair[0]);
console.log("Value is:", pair[1]);
}

Example: This example illustrates the Separate access for each parameter pair.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
          How To Get URL Parameters using JavaScript?
      </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1> <b>
        How To Get URL Parameters
        With JavaScript?
    </b>
    <p> The url used is:
    </p>
 
    <p>
       Click on the button to get the url
       parameters in the console.
    </p>
 
    <button onclick="getParameters()"> Get URL parameters </button>
    <script>
    function getParameters() {
        let urlString =
        let paramString = urlString.split('?')[1];
        let params_arr = paramString.split('&');
        for(let i = 0; i < params_arr.length; i++) {
            let pair = params_arr[i].split('=');
            console.log("Key is:" + pair[0]);
            console.log("Value is:" + pair[1]);
        }
    }
    </script>
</body>
</html>


Output:



Similar Reads

How to get an object containing parameters of current URL in JavaScript ?
The purpose of this article is to get an object which contains the parameter of the current URL. Example: Input: www.geeksforgeeks.org/search?name=john&amp;age=27 Output: { name: "john", age: 27 } Input: geeksforgeeks.org Output: {} To achieve this, we follow the following steps. Create an empty object.Using the String.match() method extract all th
2 min read
JavaScript Know the value of GET parameters from URL
In this article, we will see how to get the GET parameters from a URL using JavaScript. In order to know the parameters that are passed by the "GET" method, sometimes we need to pass the Email and other details. For that purpose, we are using the following snippet of code. Example 1: This example get the value of "a" parameter from the URL. C/C++ C
1 min read
How to get parameters from a URL string in PHP?
The parameters from a URL string can be retrieved in PHP using parse_url() and parse_str() functions. Note: Page URL and the parameters are separated by the ? character. parse_url() Function: The parse_url() function is used to return the components of a URL by parsing it. It parse an URL and return an associative array which contains its various c
2 min read
How to Get Query Parameters from a URL in VueJS ?
Query parameters are part of a URL that assigns values to specified parameters. They start after the question mark and are separated by ampersands ("&amp;") in the URL. For example, in the URL https://example.com?name=John&amp;age=23, name=John and age=23 are query parameters. The below-listed methods can be utilized to get the query parameters fro
8 min read
How to Get Query Parameters from URL in Next.js?
Next.js, a popular React framework, provides powerful features for building server-side rendered (SSR) and statically generated (SSG) applications. Handling query parameters becomes essential when working with dynamic routes and user interactions. This article will explore how to efficiently extract and manage query parameters from the URL in Next.
5 min read
How to serialize an object into a list of URL query parameters using JavaScript ?
Given a JavaScript Object and the task is to serialize it into a URL query parameters using JavaScript. Approach 1: Declare an object and store it in the variable.Then use JSON.stringify() method to convert a JavaScript object into strings and display the content.Next, take an empty string and append (key, value) pairs of objects to it by accessing
2 min read
Convert URL parameters to a JavaScript Object
Given an URL with parameters, The task is to get those parameters and convert them to a JavaScript Object using javascript. we're going to discuss a few techniques. Below is the following method to convert URL parameters to a JavaScript Object: Using replace() MethodUsing split() MethodUsing for ...of loopMethod 1: Using replace() MethodThis method
2 min read
Convert relative path URL to absolute path URL using JavaScript
Given a relative URL, the task is to convert the relative URL to an absolute URL. Here, the base URL is also given. 2 approaches are discussed here, the first example has the baseURL provided by the user and the second takes it from the URL of the page. Approach 1: Get the relURL and baseURL from user.Use .split() method to split the base and relat
3 min read
How to handle URL parameters in Express ?
In this article, we will discuss how to handle URL parameters in Express. URL parameters are a way to send any data embedded within the URL sent to the server. In general, it is done in two different ways. Table of Content Using queriesUsing Route parameterSteps to Create Express Application:Let's implement the URL parameter in an Express Applicati
3 min read
How to retrieve GET parameters from JavaScript ?
In order to know the parameters, those are passed by the “GET” method, like sometimes we pass the Email-id, Password, and other details. For that purpose, We are using the following snippet of code. When you visit any website, ever thought about what the question mark '?' is doing in the address bar? Let's find out what is the use of this question
2 min read