javascript - 如何解决URL中重复参数的问题

Question

我有一个 Ajax 选择输入，更改 URL 时，页面不会刷新。但是，当多次更改选择输入时，重复的参数会堆叠在 URL 中:

[domain]/find.php?cat=1#pricemin=10&pricemax=500#pricemin=10&pricemax=500

如何使用 javascript 将其编码回:

[domain]/find.php?cat=1#pricemin=10&pricemax=500

这样就不会出现重复的参数？

我当前的 jQuery 示例如下:

$('#filterform select').on('change', function(e){
        var dummy = $('#filterform').serialize(),
            loc = $('<a>', {href:window.location})[0];

        someajaxfunction();//do ajax function here
        if(history.pushState){
            history.pushState(null, null, loc +'#'+ dummy);
        }
    });

我尝试用loc.pathname替换loc，重复参数问题得到解决。但是我的 ?cat=1 表单参数也消失了，这是不希望的。我希望用 URL 搜索和修改 jQuery/javascript 方法来解决这个问题，例如:

我们拥有的是

[domain]/find.php?cat=1&subcats%5B%5D=1&subcats%5B%5D=2

我们想要的是

[domain]/find.php?cat=1&subcats=1+2

可能吗？

注意:发布此问题 5 分钟后，我意识到使用 loc.pathname + loc.search 解决了我的问题，抱歉发了这么长的帖子。我仍然对 URL 搜索和修改 jQuery/javascript 方法感到好奇。如果有人能提供一个起点，我将不胜感激，谢谢!

Answer 1

function removeDuplicate(url) {
  url = decodeURIComponent(url);                  // decode the url, %5B becomes [ and ,%5D becomes ]. Hence the url becomes  [domain]/find.php?cat=1&subcats[]=1&subcats[]=2
  var query = url.split('?')[1];                  // get only the query
  var parts = query.split('&');                   // split the query into parts: cat=1, subcats[]=1, subcats[]=2
  var params = {};
  for (var i = 0; i < parts.length; i++) {
    var nv = parts[i].split('=');
    if (!nv[0]) continue;
    var value = nv[1] || true;
    if (params[nv[0]] && params[nv[0]].indexOf(value)) {
      params[nv[0]].push(value);
    } else {
      params[nv[0]] = [value];
    }
  }

  url = url.split('?')[0] + '?';
  var keys = Object.keys(params);
  for (var i = 0; i < keys.length; i++) {
    url += keys[i] + '=' + params[keys[i]].join('+');

    if (i !== keys.length - 1) url += '&';
  }
  return url;
}