获取URL个参数并筛选出特定参数

Question

我想从 URL 中过滤掉一个特定的参数。我有以下情况：

页面已加载（例如：http://test.com/default.aspx?folder=app&test=true）
加载页面时调用一个函数将条目推送到历史记录 (pushState)：（例如：http://test.com/default.aspx?folder=app&test=true&state=1）
现在我想调用一个函数来读取所有参数并输出所有这些参数 state。所以我最终得到：“？folder=app&test=true”（只是一个字符串值，没有数组或对象）。请记住，我不知道 state 参数

我试过的

我知道我可以使用以下代码获取所有参数：

window.location.search

但会导致：

?folder=app&test=true&state=1

我尝试拆分url，例如：

var url = '?folder=app&test=true&state=1';
url = url.split('&state=');
console.log(url);

但这不起作用。也因为每个请求中的state数字是动态。一个解决方案可能是从 url 中删除最后一个参数，但我也不知道是否会出现这种情况，因此我需要一些过滤机制，它只会过滤掉

state=/*regex for a number*/

Answer 1

要实现这一点，您可以将提供给页面的查询字符串转换为对象，删除结果的 state 属性 - 假设它存在 - 然后您可以将对象转换回查询字符串已准备好在 pushState() 中使用。像这样：

var qsToObj = function(qs) {
  qs = qs.substring(1);
  if (!qs) return {};    
  return qs.split("&").reduce(function(prev, curr, i, arr) {
    var p = curr.split("=");
    prev[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
    return prev;
  }, {});
}

var qs = '?'; // window.location.search;
var obj = qsToObj(qs);
delete obj.state;
console.log(obj);

var newQs = $.param(obj);
console.log(newQs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

查询字符串到对象逻辑归功于 this answer。

Answer 2

我同意 Rory 的回答，你应该有一个对象来安全地操作参数。这是我使用的功能。

function urlParamsObj(source) {
    /* function returns an object with url parameters
    URL sample: www.test.com?var1=value1&var2=value2
    USE:    var params = URLparamsObj();
    alert(params.var2)  --> output: value2
    You can use it for a url-like string also: urlParamsObj("www.ok.uk?a=2&b=3")*/
    var urlStr = source ? source : window.location.search ? window.location.search : ""
        if (urlStr.indexOf("?") > -1) { // if there are params in URL
            var param_array = urlStr.substring(urlStr.indexOf("?") + 1).split('&'),
            theLength = param_array.length,
            params = {},
            i = 0,
            x;
            for (; i < theLength; i++) {
                x = param_array[i].toString().split('=');
                params[x[0]] = x[1];
            }
            return params;
        }
        return {};
}

Answer 3

抱歉，如果这是错误的，正如我认为 &state=1,2,3,4,5,6 是绝对的，它只是取决于数量来选择状态，就像我的网络一样

var url = '?folder=app&test=true&state=1';
url = url.substring(0, url.indexOf('&s'));
$('#demo').text(url);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='demo'></span>

Answer 4

var url = '?folder=app&test=true&state=1';
url = url.split('&folder=');
console.log(url);

Answer 5

一个更简单的方法是：

  let url = new URL(window.location.href)

  url.searchParams.delete('state');
  window.location.search = url.search;

您可以在 MDN Web Docs.

中阅读有关 URLSearchParams.delete() 的内容

获取URL个参数并筛选出特定参数

Getting URL parameters and filter out a specific parameter

javascript

jquery

html5-history