在后面解析带有"&“字符而没有"=”的URL参数

Question

我有下面的代码，所以我可以从url中获得参数。

但是，其中一个参数在文本中有一个&符号，导致文本被切断后出现文本。我如何使&标志显示与相应的文本之后呢？

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

 var cmp = getUrlVars()["cmp"];
    document.getElementById("currentMemberPackage").value = cmp;
    var replaced = cmp.replace(/%20/g, " "); 

示例URL = ?Club%20Plus%20Health%20&%20Fitness (我不能改变这一点，因为它在数据中包含了&，该数据正被推入URL中)

显示：俱乐部+健康

应该是：俱乐部加健康与健身

Answer 1

这是一个错误的数据提供程序端，请让数据提供者知道，因为这应该被修复。

如果您知道所有可能的键值，并且它们不是太多，那么有一种方法可以100%正确地提取值。在这种情况下，regex看起来就像

new RegExp("[?&]+([^=&]+)=(.*?)(?=&(?:" + your_keys.map(function(x) {return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');}).join("|") + ")=|$)", "gi")

有一个脆弱的通用非100%的工作为这个，就像

/[?&]+([^=&]+)=(.*?)(?=&[^=&]+=|$)/gi

见这个regex演示。您可以使用它，直到数据提供程序修复了这个问题，并且您还不知道所有可能的键。

详细信息

• [?&]+ -1或更多?或&字符
• ([^=&]+) -第1组：=和&以外的一个或多个字符
• = -等号
• (.*?) -第2组:除行中断字符以外的任何0+字符，尽可能少
• (?=&[^=&]+=|$) -后面跟着&，一个或多个字符，而不是=和&，然后是=，或者字符串的末尾。

Answer 2

URL中的&是一个特殊的字符--您必须对其进行URL编码。使用encodeURIComponent自动完成此操作：

​

const str = "Club Plus Health & Fitness";
const encoded = encodeURIComponent(str);
console.log(encoded);

​

Answer 3

1. 服务器必须发送%26而不是无效的&。生成URL的人需要在服务器端修复它。
2. 然后可以用有用的URLSearchParams替换您的函数。

​

var url = "?cmp=Club%20Plus%20Health%20%26%20Fitness"

var cmp = new URLSearchParams(url).get("cmp");
console.log(cmp)

​

如果无法阻止无效的发送，则可选。

如果有多个参数，请确保不要盲目地将&转换为%26，否则可以中断代码：

​

var url = "?someparm=a&cmp=Club%20Plus%20Health%20&%20Fitness"
           .replace(/&%20/g,"%26 "); // add the space!

var cmp = new URLSearchParams(url).get("cmp");
console.log(cmp)

​