如何从 url 中删除参数？

Question

我使用了以下代码，因此可以将多个参数添加到 url

    <script>
        function setParam(name, value) {
            var l = window.location;

            /* build params */
            var params = {};        
            var x = /(?:\??)([^=&?]+)=?([^&?]*)/g;        
            var s = l.search;
            for(var r = x.exec(s); r; r = x.exec(s))
            {
                r[1] = decodeURIComponent(r[1]);
                if (!r[2]) r[2] = '%%';
                params[r[1]] = r[2];
            }

            /* set param */
            params[name] = encodeURIComponent(value);

            /* build search */
            var search = [];
            for(var i in params)
            {
                var p = encodeURIComponent(i);
                var v = params[i];
                if (v != '%%') p += '=' + v;
                search.push(p);
            }
            search = search.join('&');

            /* execute search */
            l.search = search;
        }
    </script>

<a href="javascript:setParam('priceMin', 300);">add priceMin=300</a>

<a href="javascript:setParam('priceMin', 600);">add priceMin=600</a>

<a href="javascript:setParam('MaxDistance', 300);">add MaxDistance=300</a>

这取自问题： 如何向 URL 添加参数？

但是需要添加什么额外的脚本，所以如果再次单击相同的超链接，它会删除 url 中的参数？ 在这种情况下是 '?priceMin=300'

Answer 1

Javascript 已经有 URL 对象。如果你想要这样的东西，你可以 append 参数。

 const newUrl = new URL(window.location.href);

function setParam(name, value, option = 'add') {
    var paramexist = newUrl.searchParams.has(name);
    if (option == 'remove') {
        newUrl.searchParams.delete(name);
        return newUrl;
    }
    (!paramexist) ? newUrl.searchParams.append(name, value) : newUrl.searchParams.set(name, value);
    return newUrl;
}

console.log(setParam('priceMin', 300));
console.log(setParam('priceMin', 300,'remove'))

Answer 2

您可以尝试添加一个if块，如果它已经存在则清除搜索，或者如果搜索为空，则允许添加参数：

function setParam(name, value) {
    var l = window.location;

    if (l.search) {
      l.search = ''
      return          
    }

    ...

 }

Answer 3

如果您有多个参数，Hero Qu 的答案将重置整个参数列表。

这样做的方法是检查该特定参数是否存在然后删除它，否则添加它。

我在下面修改了您的代码以考虑多个参数。

<script>
  function setParam(name, value) {
    var l = window.location;

    /* build params */
    var params = {};
    var x = /(?:\??)([^=&?]+)=?([^&?]*)/g;
    var s = l.search;
    for (var r = x.exec(s); r; r = x.exec(s)) {
      r[1] = decodeURIComponent(r[1]);
      if (!r[2]) r[2] = '%%';
      params[r[1]] = r[2];
    }

    /** Check to see if the param exist already
    Delete if it exist, set it, if it doesn't
    **/
    if (params[name] && value == params[name]) {
      delete params[name];
    } else if (params[name] && value != params[name]) {
      delete params[name];
      params[name] = encodeURIComponent(value);
    } else {
      params[name] = encodeURIComponent(value);
    }

    /* set param */

    /* build search */
    var search = [];
    for (var i in params) {
      var p = encodeURIComponent(i);
      var v = params[i];
      if (v != '%%') p += '=' + v;
      search.push(p);
    }
    search = search.join('&');

        /* execute search */``
    l.search = search;
  }
</script>

<a href="javascript:setParam('priceMin', 200);">add priceMin=200</a>
<br />
<a href="javascript:setParam('priceMin', 300);">add priceMin=300</a>
<br />
<a href="javascript:setParam('priceMax', 400);">add priceMax=400</a>