如何使用Javascript/jQuery在URL中添加或替换查询参数？

Question

我正在使用jQuery 1.12.我想在我的窗口的URL查询字符串中替换查询字符串参数,或者如果之前不存在则添加参数.我试过以下:

new_url = window.location.href.replace( /[\?#].*|$/, "?order_by=" + data_val )  
window.location.href = new_url 

但我发现的是,这会消除查询字符串中的所有先前参数,这是我不想要的.如果查询字符串是:

?a=1&b=2

我希望新的查询字符串是:

?a=2&b=2&order_by=data

如果查询字符串是:

?a=2&b=3&order_by=old_data

它会变成:

?a=2&b=3&order_by=data

Answer 1

一个好的解决方案应该处理以下所有问题：

1. 已具有order_by查询参数的URL ，可选在等号前使用空格。这可以进一步分为order_by出现在查询字符串的开头、中间或结尾的情况。
2. 一个没有和order_by查询参数但已经有一个问号来分隔查询字符串的 URL 。
3. 一个没有和order_by查询参数的 URL，也没有问号来分隔查询字符串。

以下将处理上述情况：

  if (/[?&]order_by\s*=/.test(oldUrl)) {
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val);
  } else if (/\?/.test(oldUrl)) {
    newUrl = oldUrl + "&order_by=" + data_val;
  } else {
    newUrl = oldUrl + "?order_by=" + data_val;
  }

如下所示：

  if (/[?&]order_by\s*=/.test(oldUrl)) {
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val);
  } else if (/\?/.test(oldUrl)) {
    newUrl = oldUrl + "&order_by=" + data_val;
  } else {
    newUrl = oldUrl + "?order_by=" + data_val;
  }

Answer 2

您可以使用 jQuery 插件为您完成所有繁重的工作。它将解析查询字符串，并为您重建更新的查询字符串。要处理的代码少得多。

插件下载页面
Github Repo

// URL: ?a=2&b=3&order_by=old_data

var order_by = $.query.get('order_by');
//=> old_data

// Conditionally modify parameter value
if (order_by) { 
  order_by = “data”;
}

// Inject modified parameter back into query string
var newUrl = $.query.set(“order_by”, order_by).toString();
//=> ?a=2&b=3&order_by=data

对于那些使用 Node.js 的人，NPM 中有一个可用的包。

NPM 包
Github Repo

var queryString = require('query-string');
var parsed = queryString.parse('?a=2&b=3&order_by=old_data');  // location.search

// Conditionally modify parameter value
if (parsed.order_by) {
  parsed.order_by = 'data';
}

// Inject modified parameter back into query string
const newQueryString = queryString.stringify(parsed);
//=> a=2&b=3&order_by=data