Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

June 27, 2022 10:42 pm GMT

Get URL Parameters with JavaScript

URL Parameters (also known as Query Parameters or Query String) are a set o key value pars 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=LurlParams.get('color')     // purpleurlParams.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 caracters 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=LurlParams.get('color')   // purpleurlParams.get('size')    // MurlParams.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=LurlParams.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=LurlParams.has('color')   // trueurlParams.has('size')    // trueurlParams.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=LgetParameterByName('color')   // purplegetParameterByName('size')    // MgetParameterByName('nothing') // null

Original Link: https://dev.to/robert96/get-url-parameters-with-javascript-1ah6

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To