时间戳

首页 > 解决方案 > 查询字符串起飞最后一个 ')' 在 url

javascript - 查询字符串起飞最后一个 ')' 在 url

问题描述

我正在根据是否选中复选框在 Javascript 中构建查询字符串。

复选框中的一些选项是

我在网上找到了一个更新url参数的函数：

function updateUrlParameter(uri, key, value) {
  value = value.replace(/\s/g, "%20");
  var i = uri.indexOf('#');
  var hash = i === -1 ? '' : uri.substr(i);
  uri = i === -1 ? uri : uri.substr(0, i);
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";

  if (!value) {
    // remove key-value pair if value is empty
    uri = uri.replace(new RegExp("([&]?)" + key + "=.*?(&|$)", "i"), '');
    if (uri.slice(-1) === '?') {
        uri = uri.slice(0, -1);
    }
  } else {
    console.log("value is " + value)
    uri = uri + separator + key + "=" + value;
  }
  return uri + hash;
}

使用上述函数，如果我从上到下选中上述四个复选框，我的查询字符串变为

?plantType=Annual&plantType=Grass&plantType=Shrub%20(Evergreen)&plantType=Shrub%20(Deciduous

为什么函数忽略字符串中的最后一个 ')'？有解决办法吗？我想在查询字符串中保留括号，因为这将使查询数据库更容易。

我创建了一个函数来遍历输入复选框。如果它们被选中，则使用 updateUrlParameter 函数更新 URI。

function getQueryString() {
  var inputsContainerChildren = $('#floatingDivForFilter').children();
  var input = document.createElement('input')
  var uri = '';

  for (var i = 0; i < inputsContainerChildren.length; i++) {
    var currChild = inputsContainerChildren[i].firstElementChild;
    if (currChild) {
        if (currChild.tagName === 'INPUT') {
            if (currChild.checked) {
                var id = currChild.id;
                    console.log(uri)
                    uri  = updateUrlParameter(uri, currChild.name, currChild.value);
            }
        }
    }
} 
console.log(uri);

}

下面的照片显示了生成的 URL 的快照。我不知道为什么最后一个'）'被砍掉了。 网址照片

标签： javascriptstringurl

解决方案

您看到的问题只是 Chrome 开发人员工具试图过于聪明。

将 url 记录到控制台时，Chrome 不会将完整的 url 识别为链接，但会排除关闭的“)”。他们可能会这样做，因为人们在大括号中编写 url 是很常见的，并且不期望右大括号是 url 的一部分。

由于这只是开发人员工具的问题，您可以忽略该问题。它不会影响代码的运行时行为。

当您正确转义参数中的特殊字符时，该问题将得到解决（无论如何您都应该这样做）：

function updateUrlParameter(uri, key, value) {
  // removed because escape will do that 
  // value = value.replace(/\s/g, "%20");
  var i = uri.indexOf('#');
  var hash = i === -1 ? '' : uri.substr(i);
  uri = i === -1 ? uri : uri.substr(0, i);
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";

  if (!value) {
    // remove key-value pair if value is empty
    uri = uri.replace(new RegExp("([&]?)" + key + "=.*?(&|$)", "i"), '');
    if (uri.slice(-1) === '?') {
        uri = uri.slice(0, -1);
    }
  } else {
    console.log("value is " + value)
    // Use escape on key and value
    uri = uri + separator + escape(key) + "=" + escape(value);
  }
  return uri + hash;
}

let s = "http://chrome.is.too.clever/";
s = updateUrlParameter(s, "plantType", "Annual");
s = updateUrlParameter(s, "plantType", "Grass");
s = updateUrlParameter(s, "plantType", "Shrub (Evergreen)");
s = updateUrlParameter(s, "plantType", "Shrub (Deciduous)");
console.log(s);

小提琴

推荐阅读