How can I get specific items from a URL in Javascript?

Question

I have an URL like https://www.some.com/something-else/?utm_source=Google-PageM&utm_medium=Paid&utm_campaign=SEM-Something. The request was to extract the values of the UTMs (Google-Page, Paid, SEM-Somethig) to send them in a post request. Actually I'm using this Javascript code:

const utmSource = location.href.replaceAll('?', '$').
  replaceAll('&', '$').
  split('$').filter(utm => utm.includes('utm_source')).
  map(utm => utm.split('=')).flat()[1];

For every UTM (utm_source, utm_campaign & utm_medium) but I think that maybe are a better way to do this.

Is there a better way to do it?

Thanks everyone!

There's a browser [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface you could use. — James, Mar 30 '22 at 18:38

James · Accepted Answer · 2022-03-30T19:22:59.587

How about convert it to a URL and get searchParams?

const url = new URL("https://www.some.com/something-else/?utm_source=Google-PageM&utm_medium=Paid&utm_campaign=SEM-Something");
console.log(url.searchParams.get("utm_medium"));

To get all searchParams:

const url = new URL("https://www.some.com/something-else/?utm_source=Google-PageM&utm_medium=Paid&utm_campaign=SEM-Something");
const params = new URLSearchParams(url);
url.searchParams.forEach(function (val, key) {
        console.log(key,val)
    });

get params starts with 'utm_':

const url = new URL("https://www.some.com/something-else/?utm_source=Google-PageM&utm_medium=Paid&utm_campaign=SEM-Something");
const params = new URLSearchParams(url);
const paraobject ={}
url.searchParams.forEach(function (val, key) {
if(key.startsWith("utm_"))
    paraobject[key] = val
    });
  console.log(paraobject)
  console.log(paraobject["utm_source"])

isherwood · Answer 2 · 2022-03-30T19:32:37.053

There are many ways to get the query parameters. Then I'd just check for the utm_ prefix, something like this:

const url = 'utm_source=Google-PageM&utm_medium=Paid&utm_campaign=SEM-Something';
const params = new URLSearchParams(url);
let utmParams = {};

for (const [key, val] of params) {

  // check for prefix
  if (key.startsWith('utm_')) {

    // add to a new object array
    utmParams[key] = val;
  }
}

console.log(utmParams);

rehnoj · Answer 3 · 2022-03-30T20:16:36.763

Do you only want the values of the parameters? I assume that you want both the key and the value if you attend to use them in a post. One way to get all usm_* params (with key and values) is like this:

const url = new URL("https://www.some.com/something-else/?utm_source=Google-PageM&utm_medium=Paid&utm_campaign=SEM-Something");
const urlParams = new URLSearchParams(url.search);

const utmParams = Array.from(urlParams.entries()).filter(param => param[0].startsWith("utm"));

/* utmParams:
[Array(2), Array(2), Array(2)]
    0: ['utm_source', 'Google-PageM']
    1: ['utm_medium', 'Paid']
    2: ['utm_campaign', 'SEM-Something']
*/

Then, if you only want to get the keys or values:

const utmKeys = utmParams.map(key => key[0]);
const utmValues = utmParams.map(value => value[1]);

/* utmKeys:
['utm_source', 'utm_medium', 'utm_campaign']
*/

/* utmValues:
['Google-PageM', 'Paid', 'SEM-Something']
*/

How can I get specific items from a URL in Javascript?

3 Answers3