How to get value of URL query parameter with dynamic name?

user_17339540 0
Viewed 595

I need to extract the value of a query parameter in a URL, but the parameter changes on each page.

For example, I want to get the color variable, but it always changes based on the productID. In this case it is 'dwvar_2000440926_color' but for another product it will be 'dwvar_545240926_color'. _color stays consistent, so I'd like to key off that:

https://www.example.com/us/2000440926.html?dwvar_2000440926_color=02

Thanks!

javascript
4 Answers

You should use regex. Based on the description of the URL behavior you described you could do something like this:

const url = new URL("https://www.example.com/us/2000440926.html?dwvar_2000440926_color=02");

// Now url.search contains your query parameters.
// We gonna apply the regex on it to capturing the color id
let matches = url.search.match(/dwvar_\d+_color=(\d+)/)

// `matches` now contains the captured groups
console.log(matches[1])
// log : 02
user_113139590

Assuming that 1) you want to do this on the client side 2) the color param always begins with dwvar as shown in your example and 3) that there is never more than one dwvar param, you can use the following javascript:

let searchParams = new URLSearchParams(document.location.search);
searchParams.forEach((param_value, param_name) => {
  if (param_name.indexOf('dwvar') == 0) {
    console.log(param_value)
  }
})
user_12098320

Basic regular expression would work

const myURL = new URL("https://www.example.com/us/2000440926.html?dwvar_2000440926_color=02")

console.log(myURL.search.match(/_color=([^&]+)/)[1]);

// more specfic
console.log(myURL.search.match(/dwvar_\d+_color=([^&]+)/)[1]);

user_141040 
window.location.search.slice(1).split('&').reduce((acc, it) => {
  const [key, val] = it.split('=');
  return {
  ...acc,
      [key]: val,
  };
}, {});
user_113066570
Related