Published on

Get Url Parameters With Javascript

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']

URL Parameters Structure

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

https://example.com/path/to/page?color=purple

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

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

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;

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

const urlParams = new URLSearchParams(queryString);

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

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']

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

Iterating over URL parameters

Iterate through all keys:

const keys = urlParams.keys();
for (const key of keys) {
  console.log(key);
}

Iterate through all values:

const values = urlParams.values();

for (const value of values) {
  console.log(value);
}

Iterate through all key/value pairs:

const entries = urlParams.entries();

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

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]);
}

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

See also

Ember.js: Build a Markdown component with ShowdownJs

With the help of ShowdownJs and HighlightJs you can build an Markdown component with syntax highlighting.

ShowdownJs is an easy to use Markdown to HTML converter, it can be used in both client side (browser) or server side (with nodejs).

HighlightJs is an JavaScript library for syntax highlighting on the web. It supports 189 languages and 94 styles.

Let’s build component for rendering markdown with ShowdownJs and HighlightJs.