Get Query String Values in Vanilla JavaScript

Jun 17, 2020

The property contains the raw query string. For example, if you open http://localhost:5000/?answer=42, then will equal '?answer=42'.

You can parse the query string using the URLSearchParams class:

const querystring = '?answer=42';
const params = new URLSearchParams(querystring);

params.get('answer'); // '42'

Instances of URLSearchParams are similar to JavaScript maps. In order to get all keys in the search string, you can use the keys() function or the entries() function. Keep in mind these functions return JavaScript iterators, not arrays, so you need to use Array.from() to convert them.

const querystring = '?answer=42&question=unknown';
const params = new URLSearchParams(querystring);

Array.from(params.keys()); // ['answer', 'question']
Array.from(params.entries()); // [['answer', '42'], ['question', 'unknown']]

Without URLSearchParams

The URLSearchParams class enjoys reasonable browser support and works in Node.js. The big caveat is that URLSearchParams is not supported in Internet Explorer.

The URLSearchParams class handles a lot of edge cases for you, but, in many cases, you can get away with the below simple function for parsing the query string.

function parse(qs) {
  return qs.
    replace(/^\?/, '').
    map(str => str.split('=').map(v => decodeURIComponent(v)));

parse('?answer=42&question=unknown'); // [['answer', '42'], ['question', 'unknown']]

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials