Post
Ask Question

How to Get Query String in JavaScript

A - Introduction

In C#, we knew Query String can be obtained by such as

string fullname1 = Request.QueryString["fullname"];
string fullname2 = Request["fullname"];

How can we get Query String in JavaScript in several ways?

The content of this article

  • A - Introduction
  • B - Query String in URL
  • C - By URL API with its Property searchParams
    • C-1 Syntax
    • C-2 URLSearchParams Object
    • C-3 Sample
    • C-4 Real Case
  • D - by URLSearchParams API
    • Syntax
    • An Example
  • E - Introduction for MDN
    • E-1, What is MDN
    • E-2, Topics in MDN
    • E-3, Web APIs:

B - Query String in URL

A query string is a set of characters tacked onto the end of a URL. 

The query string begins after the question mark (?) and can include one or more parameters. Each parameter is represented by a unique key-value pair or a set of two linked data items. An equals sign (=) separates each key and value. An ampersand (&) separates multiple parameters. 

Let's assume the current URL is: 

https://example.com?name=Shubham&age=22

We have two query string parameters in the above example: name and age. There can be multiple parameters too.

C - By URL API with its Property searchParams

C-1, Syntax: 

This method will use MDN (see below for explanation) URL API associated with its Property searchParams. The Syntax is as

const url = new URL("https://example.com?name=Shubham&age=22");
const queryParams = url.searchParams;

The searchParams readonly property of the URL interface returns an URLSearchParams object allowing access to the GET decoded query arguments contained in the URL

C-2, URLSearchParams object

The URLSearchParams object provides a bunch of methods that can be used to interact with the query parameters. Some of them are as follows.

  • has(): This is to check if the query string contains a specific parameter.
  • get(): This is to get the value of a specific parameter.
  • getAll(): This is to get an array of all the values in the query string.
  • forEach(): This is to iterate over the parameters of the query string.
  • keys(): This is to iterate over the keys of the query string.
  • values(): This is to iterate over the values of the query string.

C-3, Sample:

// Let's assume current URL is: https://example.com?name=Shubham&age=22

const url = new URL("https://example.com?name=Shubham&age=22");
const queryParams = url.searchParams;

// 1. Iterate over the keys
for (const key of queryParams.keys()) {
    console.log(key);
}
/* Output:
name
age
*/

// 2. Iterate over the values
for (const value of queryParams.values()) {
    console.log(value);
}
/* Output:
Shubham
22
*/

// 3. Check if the query string contains "contact"
const containsContact = queryParams.has('contact');
console.log(containsContact);
/* Output:
false
*/

// 4. Get the value of "name"
const name = queryParams.get('name');
console.log(name);
/* Output:
Shubham
*/

C-4, Real Case:

In this case, the target url is given as

  • "login.aspx?T=.... --- as shown in the screenshot in RED

Due to it is not a full URL defined as HTTP or HTTPS protocol, it is not allowed by the URL constructor, we added prefix: "https://www.example.com/" as shown in Line 7008, then we can catch the width value as 291 by

  • url.searchParams.get("width"), Line 7009

D - by URLSearchParams API

Syntax

This method will use MDN (see below for explanation) URLSearchParams API singly. The Syntax is as

const param = new URLSearchParams(window.location.search);

This will define an URLSearchParams object directly, allowing access to the GET decoded query arguments contained in the URL.

An example,

We try to catch the parameter T=5:

We use URLSearchParams API to get it:

 

E - Introduction for MDN

We referenced MDN in the discussion; now, we will have a brief discussion of MDN itself. 

E-1, What is MDN: 

We got info in this article mainly from MDN. What is MDN? This is from wiki:

MDN Web Docs, previously Mozilla Developer Network and formerly Mozilla Developer Center, is a documentation repository and learning resource for web developers. It was started by Mozilla in 2005 as a unified place for documentation about open web standards, Mozilla's own projects, and developer guides.

MDN Web Docs content is maintained by Mozilla, Google employees, and volunteers (a community of developers and technical writers). It also contains content contributed by Microsoft, Google, and Samsung, who, in 2017, announced they would shut down their own documentation projects and move all their documentation to MDN Web Docs. Topics include HTML5, JavaScript, CSS, Web APIs, Django, Node.js, WebExtensions, MathML, and others.

E-2, Topics in MDN:

See the screenshot below:

Guides

E-3, Web APIs:

In this library, there are about 120 Web APIs. What we used is URL API:

Including two interfaces: 

  • URL 
  • URL SearchParams

 

References:


Similar Articles