javascript - 如何使用 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

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

Plugin Download Page
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 Package
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