如何從 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>