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

Posted 2023-02-22

【中文标题】为啥我要检索的 URL 参数没有完全显示？

【英文标题】：Why is the URL parameter I want to retrieve not fully displayed?为什么我要检索的 URL 参数没有完全显示？

【发布时间】：2019-10-08 09:42:50

【问题描述】：

我正在跟踪带有 "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)

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

【问题讨论】：

嗯，这是一个无效的 URI - 您需要对发送数据的 & 进行编码，例如 %26。

试试w3schools.com/jsref/jsref_decodeuricomponent.asp中的例子

好点...是否可以仅编码 url 的 1 个元素？

我尝试了另一种使用正则表达式的方法： var regex = (/(?=posName=)(.*)&/g) // var posName = uri.match(regex).... 但是它返回未定义。

【参考方案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))

【参考方案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)

【讨论】：

不错的正则表达式...但是在 Google 标签管理器中将其与脚本一起使用时，它会返回此错误：“：无法将 ECMASCRIPT_2018 功能“RegExp Lookbehind”转换为目标输出语言。” GTM 不接受新的正则表达式功能吗？

在等待 GTM 升级时，我们可以在我更新的答案中使用解决方法：D

谢谢..我需要为 GTM 做一些调整（“var”而不是“let”），但效果很好！