Accessing Browser Query Parameters in JavaScript

Accessing Browser Query Parameters in JavaScript

How to access and update query parameters in the browser's location. In this post, we will cover how to access query parameters in a URL using URLSearchParams.

In this post, we will cover how to access query parameters in a URL using [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) .

Query parameters are sometimes called search parameters and appear at the end of a URL:

https://site.com?param1=value1&param2=value2

In the above example, we have two parameters called param1 and param2 with values value1 and value2 respectively.

window.location.search gives us the bit of the URL from the question mark:

?param1=value1&param2=value2

We could write some string manipulation code to extract the parameter values from this string, but there is a much easier way with URLSearchParams:

const params = new URLSearchParams(
  window.location.search
);
const paramValue1 = params.get("param1"); // value1

The URLSearchParams constructor takes in the query parameters part of a URL. The object that is returned gives us useful utility methods to work with the query parameters.

The get method returns the value of the parameter name passed into it. It returns null if the parameter doesn’t exist.

params.get("param-that-does-not-exist"); // null

We can check whether a parameter exists using the has method:

params.has("param1"); // true
params.has("param-that-does-not-exist"); // false

The entries method allows us to iterate through all the parameters:

for (const [name, value] of params.entries()) {
  console.log(name, value);
}

javascript parameters browser

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Dealing with URL query parameters in Javascript using URLSearchParams

Interacting with the browsers URL search parameters was never easier with URLSearchParams. No need for external libraries. In this JavaScript tutorial, you'll see Dealing with URL query parameters in Javascript using URLSearchParams

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Understanding Destructuring, Rest Parameters and Spread Syntax in Javascript

In this article, I am going to explain destructuring, rest parameters, and spread syntax. The aim is to describe these features in depth so that you’ll be able to work with arrays and objects much more quickly and compactly.

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.