Sentry Answers>JavaScript>

How to get values from URLs in JavaScript

How to get values from URLs in JavaScript

Matthew C.

The Problem

You have a URL with parameters, which are known as query string parameters. For example, your query string may have a type, page, and sort parameter:

Click to Copy
https://www.example.com/store?type=sale&sort=price_descending&page=43

The query string part of the URL starts with a ”?” character. Each parameter is separated by a ”&” character. How do you get these query parameter values using JavaScript?

The Solution

You can get the query string parameters in the browser using JavaScript and Web APIs. You can also get query string parameters on the backend using Node.js.

Getting URL Query Parameters in the Browser

You can use the URLSearchParams interface Web API to work with URL query strings. The URLSearchParams() constructor takes in a query string as an argument and returns a URLSearchParams object that has methods to work with query strings. You can use the window.location.search property to access the query string of the current page and pass it as an argument to the URLSearchParams() constructor:

Click to Copy
const searchParams = new URLSearchParams(window.location.search);

To check if a query parameter exists you can use the has() method, which returns a boolean indicating if a parameter exists:

Click to Copy
console.log(searchParams.has('sort')); // true

You can get the value of the query parameter using the get() method:

Click to Copy
console.log(searchParams.get('sort')); // price_descending

The get() method returns the first value found for the given query parameter. So if there is a duplicate query parameter, only the value of the first one will be returned. You can use the getAll() method to return all values for a given query parameter.

You can loop through query parameters using various methods such as for...of:

Click to Copy
for (const param of searchParams) { console.log(param); }

Using the example URL above, https://www.example.com/store?type=sale&sort=price_descending&page=43, this loop will return the following arrays with the keys and values of the parameters:

Click to Copy
["type", "sale"] ["sort", "price_descending"] ["page", "43"]

You can also use the following methods to loop through the query parameters:

One thing to note is that the URLSearchParams() constructor interprets plus signs (”+”) as spaces, which can be an issue in certain cases. You can avoid this issue by encoding the URL string using the encodeURIComponent() function. This will change the ”+” character to the UTF-8 encoding of the character, which is %2B.

Getting URL Query Parameters Using Node.js

If you are using Express.js, which is a popular web framework for Node.js, you can use the req.query object to get query strings:

Click to Copy
app.get('/', (req, res) => { console.log(req.query); });

If there are no query string parameters, req.query will return an empty object. If there are query parameters, an object containing each parameter and its value will be returned:

Click to Copy
app.get('/', (req, res) => { console.log(req.query); // { type: "sale ", sort: "price_descending ", page: "43" } });

You can use a for...in loop to loop through the query parameters object to get the query parameter values:

Click to Copy
for (const key in req.query) { console.log(key, req.query[key]); }

Using the example URL https://www.example.com/store?type=sale&sort=price_descending&page=43, this loop will log the following strings:

Click to Copy
type sale sort price_descending page 43

Other methods can also be used to loop through the query parameters object:

Further Reading

If you’re looking to get a deeper understanding of how JavaScript application monitoring works, take a look at the following articles:

  • YoutubeHow Sentry.io saved me from disaster
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark of Functional Software, Inc.