如何添加或更新查询字符串参数？

javascript jquery query-string

2022-08-29 23:17:59

使用javascript，如果不存在，如何向URL添加查询字符串参数，或者如果存在，如何更新当前值？我正在使用jquery进行客户端开发。

答案 1

我编写了以下函数，它实现了我想要实现的目标：

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

答案 2

更新（2020年）：URLSearchParams现在被所有现代浏览器支持。

URLSearchParams 实用程序与结合使用时非常有用。例如：window.location.search

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("foo", "bar");
    window.location.search = searchParams.toString();
}

Now 已设置为无论它是否已经存在。foobar

但是，上述分配将导致页面加载，因此，如果不需要，请使用历史记录 API，如下所示：window.location.search

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search)
    searchParams.set("foo", "bar");
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
}

现在，您无需编写自己的正则表达式或逻辑来处理查询字符串的可能存在。

但是，浏览器支持很差，因为它目前处于实验阶段，并且仅在最新版本的Chrome，Firefox，Safari，iOS Safari，Android Browser，Android Chrome和Opera中使用。如果您决定使用它，请与polyfill一起使用。