DEV Community

Dezmerean Robert
Dezmerean Robert

Posted on • Edited on

Get URL Parameters with JavaScript

#javascript #webdev

URL Parameters (also known as Query Parameters or Query String) are a set o key value pairs attached to the end of a URL. They are used to send small amounts of data from page to page, or from client to server via the URL.

TL;DR 

const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); // https://example.com/path/to/page?color=purple&size=M&size=L urlParams.get('color') // purple urlParams.getAll('size') // ['M', 'L']
Enter fullscreen mode Exit fullscreen mode

URL Parameters Structure

The query parameters are separate from URL path with a ? (question mark):

https://example.com/path/to/page?color=purple
Enter fullscreen mode Exit fullscreen mode

Each parameter after the first one is joined with an & (ampersand):

https://example.com/path/to/page?color=purple&size=M&size=L
Enter fullscreen mode Exit fullscreen mode

In this case the query string is color=purple.

There are characters that cannot be part of a URL (for example space) and some other characters have a special meaning in a URL (the character #). This types of characters need to be encoded (for example space is encoded as %20).

Get a URL parameter

You can get the query string using window.location.search.

const queryString = window.location.search;
Enter fullscreen mode Exit fullscreen mode

You can then parse the query string's parameters using URLSearchParams:

const urlParams = new URLSearchParams(queryString);
Enter fullscreen mode Exit fullscreen mode

Now you can use URLSearchParams.get() to get the first value associated with the given search parameter:

// https://example.com/path/to/page?color=purple&size=M&size=L urlParams.get('color') // purple urlParams.get('size') // M urlParams.get('nothing') // empty string
Enter fullscreen mode Exit fullscreen mode

Get all values of a URL parameter

Now you can use URLSearchParams.getAll() to get all values associated with the given search parameter:

// https://example.com/path/to/page?color=purple&size=M&size=L urlParams.getAll('color') // ['purple'] urlParams.getAll('size') // ['M', 'L']
Enter fullscreen mode Exit fullscreen mode

Check if a URL parameter exists

You can use URLSearchParams.has() to check if a given parameter exists.

// https://example.com/path/to/page?color=purple&size=M&size=L urlParams.has('color') // true urlParams.has('size') // true urlParams.has('nothing') // false
Enter fullscreen mode Exit fullscreen mode

Iterating over URL parameters

Iterate through all keys:

const keys = urlParams.keys(); for (const key of keys) { console.log(key); }
Enter fullscreen mode Exit fullscreen mode

Iterate through all values:

const values = urlParams.values(); for (const value of values) { console.log(value); }
Enter fullscreen mode Exit fullscreen mode

Iterate through all key/value pairs:

const entries = urlParams.entries(); for(const entry of entries) { console.log(`${entry[0]} = ${entry[1]}`); }
Enter fullscreen mode Exit fullscreen mode

For Internet Explorer

The URLSearchParams is not suported on IE, so you will need to parse the URL and get the query parameters.

function getParameterByName(name) { cont url = window.location.search; name = name.replace(/[\[\]]/g, '\\$&'); let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); let results = regex.exec(url); if (!results) { return null; } if (!results[2]) { return ''; } return decodeURIComponent(results[2]); }
Enter fullscreen mode Exit fullscreen mode

Now you can use getParameterByName to get the first value associated with the given search parameter:

// https://example.com/path/to/page?color=purple&size=M&size=L getParameterByName('color') // purple getParameterByName('size') // M getParameterByName('nothing') // null
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
harry_wood profile image
Harry Wood •

Pretty sure it wasn't that easy last time I did thi.... oh yeah Internet Explorer