How To Get Query Parameters From a URL in JavaScript

How To Get Query Parameters From a URL in JavaScript

In this tutorial, we are going to learn how to access the query parameters from a URL using JavaScript. URL parameters (also called query string parameters or URL variables) are used to send small amounts of data from page to page, or from client to server via a URL.

URL parameters (also called query string parameters or URL variables) are used to send small amounts of data from page to page, or from client to server via a URL. They can contain all kinds of useful information, such as search queries, link referrals, product information, user preferences, and more.

In this tutorial, we are going to learn how to access the query parameters from a URL using JavaScript.

Query Parameters

Query parameters are added at the end of a URL using question mark ? followed by the key=value pairs.

Example:

localhost:3000/?name=sai

Accessing the query parameters

To access the query parameters of a URL inside the browser, using JavaScript, we can use the URLSeachParams interface that contains a get() method to work with it.

Here is an example:

Url:

localhost:3000/?name=sai

You can get the value of a name parameter from the above url like this:

// window.location.search = ?name=sai

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

const name = params.get("name");

console.log(name); // "sai"

If you have multiple parameters in a URL which is passed using & operator:

localhost:3000/?name=sai&score=10

You can access it like this:

// window.location.search = ?name=sai&score=10

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

const name = params.get("name");
const name = params.get("score");

console.log(name); // "sai"
console.log(score); // 10

You can also check, if a URL contains specified parameters or not by using the has() method.

The has() method returns boolean value true if a parameter name exists; otherwise it returns false.

params.has("name"); // true

params.has("place"); // false

Thanks for reading .

js javascript

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

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.