为什么我要检索的 URL 参数没有完全显示？

Question

我正在跟踪带有 "posName" 参数的 URL，例如：

example.com?posName=Content+&+Community+Manager+(H/F)

但我的代码只返回 "Content"：

function () {
    var uri = document.location.href;
    var uri_dec = decodeURIComponent(uri);
    var url = new URL(uri_dec);
    var posName= url.searchParams.get("posName");
    return posName;
}

如何获取完整参数？

编辑： 我有另一个网址，例如：

exemple.com?posName=Club+&+Animator+(H/F)

并且代码返回完整的参数...那么是导致此问题的参数的长度吗？

Answer 1

我已修改您的函数以接受 URI 作为参数。您需要在将参数附加到查询字符串之前对其进行编码（我们在这里看不到此代码）。您函数中的 decodeURIComponent 也不是必需的。

function getPosName (URI) {
    //var uri_dec = decodeURIComponent(uri);
    var url = new URL(URI);
    var posName = url.searchParams.get("posName");
  return posName;
}

console.log("Using your current URI:", getPosName("http://exemple.com?posName=Content+&+Community+Manager+(H/F)"))

const encodedParam = encodeURIComponent("Content & Community Manager (H/F)")
console.log("Encoded Parameter:", encodedParam)
const wellFormedURI = `http://exemple.com?posName=${encodedParam}`
console.log("Well Formed URI:", wellFormedURI)
console.log("Using well formed URI:", getPosName(wellFormedURI))

Answer 2

如果由于某种原因您无法控制 window.location.href 中的内容，您可以通过正则表达式轻松解决此问题：

function getPosName(uri) {
    let match = uri.match(/(?<=posName=)(.+?)(?=\&\w+?\=|$)/); 
    return match[1]; 
}

console.log(getPosName( "xemple.com?posName=Content+&+Community+Manager+(H/F)")); //Content+&+Community+Manager+(H/F)
console.log(getPosName( "exemple.com?posName=Club+&+Animator+(H/F)")); //Club+&+Animator+(H/F)
console.log(getPosName( "exemple.com?posName=Club+&+Animator+(H/F)&test=1")); // Club+&+Animator+(H/F)

正则表达式解释：

(?=postName=) 向后查找postName= 开始比赛

(.+?) 匹配以下前瞻模式的任何内容

(?=\&\w+?\=|$) loohahead 模式，用于文字 &，后跟从 1 开始的任何长度的文本 \w+?，后跟 =。所有这一切，或者我们在输入字符串的末尾，用$表示

更新

正则表达式后视是相对新的。如果浏览器或应用不支持正则表达式后视（例如当前的 Google 跟踪代码管理器），请尝试以下解决方法：

function getPosName(uri) {
    let match = uri.match(/posName=(.+?)(?=\&\w+?\=|$)/);
    return match[1];
}

console.log(getPosName( "xemple.com?posName=Content+&+Community+Manager+(H/F)")); //Content+&+Community+Manager+(H/F)
console.log(getPosName( "exemple.com?posName=Club+&+Animator+(H/F)")); //Club+&+Animator+(H/F)
console.log(getPosName( "exemple.com?posName=Club+&+Animator+(H/F)&test=1")); // Club+&+Animator+(H/F)