How to get Query String Values using URLSearchParams in JavaScript
Table of Contents
One of the most common ways for a browser to send data to a server is by appending it to the URL. For example, if you wanted to send the name and age of a user to a server, you might do something like this:
BASHhttps://example.com?name=John&age=21
JavaScript has built-in APIs to help you work with query strings.
In this post, we'll learn how we can test if a string contains a specific search param and how to get the value.
How to test if a string contains a search param
JavaScript provides the class URLSearchParams
to help us work with query strings. It has a method called has()
that we can use to test if a string contains a specific search param.
First let's create a new URL
object:
JAVASCRIPTconst url = new URL("https://example.com?name=John&age=21");
Now let's take the search params using the search
property, then parse them by passing them to the URLSearchParams
constructor:
JAVASCRIPTconst url = new URL("https://example.com?name=John&age=21");
const params = new URLSearchParams(url.search);
From here, we can now use the has
method that will check if the specific param exists:
JAVASCRIPTconst url = new URL("https://example.com?name=John&age=21");
const params = new URLSearchParams(url.search);
console.log(params.has("name"));
console.log(params.has("age"));
console.log(params.has("location"));
BASHtrue
true
false
How to get the value of a search param
We've seen how to test if a string contains a specific search param. Now let's see how we can get the value of a search param.
Like before, we can define a new URL, get its search params, then parse them:
JAVASCRIPTconst url = new URL("https://example.com?name=John&age=21");
const params = new URLSearchParams(url.search);
Now, we can use the get
method to get the value of a specific search param:
JAVASCRIPTconst url = new URL("https://example.com?name=John&age=21");
const params = new URLSearchParams(url.search);
console.log(params.get("name"));
console.log(params.get("age"));
console.log(params.get("location"));
BASHJohn
21
null
Alternatively, you can also iterate over the search params using the forEach
method:
JAVASCRIPTconst url = new URL("https://example.com?name=John&age=21");
const params = new URLSearchParams(url.search);
params.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
BASHname: John
age: 21
Conclusion
In this post, we learned how to test if a string contains a specific search param and how to get the value.
Simply use the has
method on the URLSearchParams
class to test if a string contains a specific search param, and the get
method to get the value.
Thanks for reading!
- How to deploy a PHP app using Docker
- Getting Started with Deno
- How to deploy an Express app using Docker
- Getting Started with Sass
- Getting Started with Handlebars.js
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting Started with Moment.js
- Learn how to build a Slack Bot using Node.js
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up Stylus CSS Preprocessor
- How To Create a Modal Popup Box with CSS and JavaScript
- Getting Started with Moon.js