如何从JavaScript中的URL获取特定项目？

Question

我有一个URL，例如https://www.some.com/something-else/?utm_source=google-pagem&； utm_medium = paid＆amp; utm_campeign = sem-sem-sem-sem-something。请求是提取UTM（Google Page，付费，SEM-SOMETHIG）的值以在POST请求中发送它们。实际上，我正在使用此JavaScript代码：

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

对于每个UTM（UTM_Source，utm_campaign＆amp; utm_medium），但我认为这可能是一种更好的方法。

有更好的方法吗？

谢谢大家！

Answer 1

如何将其转换为URL并获取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"));
   

要获取所有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)
    });

获取参数以'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"])

Answer 2

有多种方法可以获取查询参数。然后我只需检查 utm_ 前缀，如下所示：

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

Answer 3

您只需要参数值吗？我假设如果您打算在帖子中使用键和值，您就需要它们。
获取所有 usm_* 参数（带有键和值）的一种方法如下：

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

然后，如果您只想获取键或值：

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