How to get Query String Parameters in Javascript - 2019

This series is a quick javascript tricks that you can learn in 2 mins. In this article, How to get Query String Parameters in Javascript - 2019.

There is a simple method to get the query string parameters in javascript.

1const getQueryParams = (params, url) => {
2 let href = url
3 //this expression is to get the query strings
4 let reg = new RegExp("[?&]" + params + "=([^&#]*)", "i")
5 let queryString = reg.exec(href)
6 return queryString ? queryString[1] : null
7}
8
9getQueryParams("data", "http://another-example.com?example=something&data=13")

Firstly, this function takes params and url as a parameters. Inside, the function we assign the url to varialble href.

After that, Regex Pattern checks the url to match a pattern. Mainly, regex checks the value that starts with either & or ? followed by the parameter that you pass.

Regex takes the value after symbol (=) and store it in the variable queryString and returns it.

Capture

Getting All Query Strings in Javascript

Above Implementation works fine if you want to get the specific query string. However, it will not work if you want to get all the query strings.

To get all the query strings from url, we can implement a different approach.

1const getQueryParams = url => {
2 let queryParams = {}
3 //create an anchor tag to use the property called search
4 let anchor = document.createElement("a")
5 //assigning url to href of anchor tag
6 anchor.href = url
7 //search property returns the query string of url
8 let queryStrings = anchor.search.substring(1)
9 let params = queryStrings.split("&")
10
11 for (var i = 0; i < params.length; i++) {
12 var pair = params[i].split("=")
13 queryParams[pair[0]] = decodeURIComponent(pair[1])
14 }
15 return queryParams
16}
17
18getQueryParams("http://another-example.com?example=something&data=13")

Above all, the simplest way to solve this problem is to create an anchor element and use a property called search in anchor element. Search property returns the queryString completely.

Therefore, the above function takes url as a parameter. After that, we create an anchor element and assign the url to href.

After that, search method of anchor element returns the query strings of url.

As a result, we can get all the query parameters by splitting the string using keyword &.

Once you have the params in an Array, you can loop through it and get all the query strings that you want.

sdsd

Reference,

How to get Query String Parameters in Javascript - 2019.

Get Query String Parameters with JavaScript

Author

Hey, I’m Ganesh, Full stack engineer.I love to write technical content and help developers like me to grow in the industry. please consider supporting me.

To Read More

Building a Production-grade Nodejs,...

This article is the first part of building a production grade nodejs,graphql and...

Modern React Redux Tutorials with R...

This tutorial explain how you can build an application using modern react redux ...

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

Building a Production - Ready Node....

In this article, we will see how to build a Nodejs, TypeScript Application and d...

Nginx for Front-end Developers

This article is to explain Nginx for Front-end Developers in a much simpler way....

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...