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

我正在使用jquery1.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

像这样的

let new_url = "";

if (window.location.search && window.location.search.indexOf('order_by=') != -1) {
  new_url = window.location.search.replace( /order_by=\w*\d*/, "order_by=" + data_val);
} else if (window.location.search) {
  new_url = window.location.search + "&order_by=" + data_val;
} else {
  new_url = window.location.search + "?order_by=" + data_val;
}
window.location.href = new_url;

函数addorreplaceordby（newData）{
var stringToAdd=“order_by=“+newData；
如果（window.location.search==“”）
return window.location.href+stringToAdd；
if（window.location.search.indexOf（'order_by='）=-1）
return window.location.href+stringToAdd；
var newSearchString=“”；
var searchParams=window.location.search.substring（1.split（“&”）；
对于（var i=0；i{
const parameters=url.split（“？”）[1]，
正则表达式=/（\w+）=（\w+）/g，
obj={}
让临时工
while（temp=regex.exec（参数））{
obj[temp[1]]=解码组件（temp[2]）
}
返回obj
}
for（让数据的url）{
日志（getParameters（url））
}

这个小功能可能会有所帮助

函数更改SearchQueryParameter（oldParameter、newParameter、newValue）{
var参数=location.search.replace（“？”，”）.split（“&”）.filter（函数（el）{return el！==”}）；
var out=“”；
var计数=0；
如果（oldParameter.length>0）{
if（newParameter.length>0&（newValue.length>0 | | newValue>=0））{
out+=“？”；
var参数=[]；
参数.forEach（函数（v）{
var vA=v.分割（“=”）；
如果（vA[0]==oldParameter）{
vA[0]=新参数；
如果（（newValue.length>0 | | newValue>=0））{
vA[1]=新值；
}
}否则{
计数++；
}
参数推送（vA.join（“=”）；
});
if（count==parameters.length）{
push（[newParameter，newValue].join（“=”）；
}
params=params.filter（函数（el）{return el！==“”}）；
如果（参数长度>1）{
out+=参数连接（&）；
} 
如果（参数长度==1）{
out+=参数[0]；
}	
}
}否则{
如果（（newParameter.length>0）和&（newValue.length>0 | | newValue>=0））{
if（location.href.indexOf（“？”）=-1）{
var out=“&”+newParameter+“=”+newValue；
}否则{
var out=“？”+newParameter+“=”+newValue；
}
}
}
返回位置。href+out；
}
//若声明了旧的查询参数，但在url中不存在，那个么只需添加新的参数和值，若它存在，则将替换它
日志（changeSearchQueryParameter（“ib”，“idx”，5））；
//在url中添加新参数和值
日志（changeSearchQueryParameter（“，”idy“，5））；
//如果不存在新的或旧的参数，url不会更改
log（changeSearchQueryParameter（“，”，5））；
log（changeSearchQueryParameter（“，”，“）您可以使用jQuery插件为您完成所有繁重的工作。它将解析查询字符串，并为您重建更新后的查询字符串。要处理的代码要少得多




对于那些使用Node.js的人，NPM中提供了一个用于此的包




要使用正则表达式模式，我更喜欢这种模式：

var oldUrl = "http://stackoverflow.com/";
var data_val = "newORDER" ;
var r = /^(.+order_by=).+?(&|$)(.*)$/i ;
var newUrl = "";

var matches = oldUrl.match(r) ;
if(matches===null){
  newUrl = oldUrl + ((oldUrl.indexOf("?")>-1)?"&":"?") + "order_by=" + data_val ;
}else{
  newUrl = matches[1]+data_val+matches[2]+matches[3] ;
}
conole.log(newUrl);

如果不存在
order\u by
，则匹配的
为
null
，
order\u by=.
应位于
？
或
&
（如果存在其他参数，则需要新参数
&
）

如果存在
order\u by
，
matches
有3项，
也许您可以尝试调整正则表达式以仅检索您要查找的值，然后在助手函数中添加或更新它们，如下所示：

function paramUpdate(param) {

  var url = window.location.href,
      regExp = new RegExp(param.key + '=([a-z0-9\-\_]+)(?:&)?'),
      existsMatch = url.match(regExp);

  if (!existsMatch) {
      return url + '&' + param.key + '=' + param.value
  }

  var paramToUpdate = existsMatch[0],
      valueToReplace = existsMatch[1],
      updatedParam = paramToUpdate.replace(valueToReplace, param.value);

  return url.replace(paramToUpdate, updatedParam);
}

var new_url = paramUpdate({
    key: 'order_by',
    value: 'id'
});
window.location.href = new_url;

希望它能满足您的需要
var oldUrl = "http://stackoverflow.com/";
var data_val = "newORDER" ;
var r = /^(.+order_by=).+?(&|$)(.*)$/i ;
var newUrl = "";

var matches = oldUrl.match(r) ;
if(matches===null){
  newUrl = oldUrl + ((oldUrl.indexOf("?")>-1)?"&":"?") + "order_by=" + data_val ;
}else{
  newUrl = matches[1]+data_val+matches[2]+matches[3] ;
}
conole.log(newUrl);

function paramUpdate(param) {

  var url = window.location.href,
      regExp = new RegExp(param.key + '=([a-z0-9\-\_]+)(?:&)?'),
      existsMatch = url.match(regExp);

  if (!existsMatch) {
      return url + '&' + param.key + '=' + param.value
  }

  var paramToUpdate = existsMatch[0],
      valueToReplace = existsMatch[1],
      updatedParam = paramToUpdate.replace(valueToReplace, param.value);

  return url.replace(paramToUpdate, updatedParam);
}

var new_url = paramUpdate({
    key: 'order_by',
    value: 'id'
});
window.location.href = new_url;

function addOrReplace(key, value) {
  var stringToAdd = key+"=" + value;
  if (window.location.search == "")
    return window.location.href + '?'+stringToAdd;

  if (window.location.search.indexOf(key+'=') == -1)
    return window.location.href + stringToAdd;

  var newSearchString = "";
  var searchParams = window.location.search.substring(1).split("&");
  for (var i = 0; i < searchParams.length; i++) {
    if (searchParams[i].indexOf(key+'=') > -1) {
      searchParams[i] = key+"=" + value;
      break;
    }
  }
  return window.location.href.split("?")[0] + "?" + searchParams.join("&");
}

window.location.href = addOrReplace('order_by', 'date_created');

if (history.pushState) {
    var newurl =  addOrReplace('order_by', 'date_created');
    window.history.pushState({path:newurl},'',newurl);
}