使用jQuery更新现有的URL查询字符串值

Question

假设我有一个网址,例如:

http://www.example.com/hello.png?w=100&h=100&bg=white

我想要做的是更新w和h查询字符串的值,但保持bg查询字符串不变,例如:

http://www.example.com/hello.png?w=200&h=200&bg=white

那么什么是读取查询字符串值的最快最有效的方法(它们可以是任何一组查询字符串值,而不仅仅是w,h和bg),更新一些值或不更新值,并返回完整的URL与新的请求参数？

所以:

1. 获取每个查询字符串键的值
2. 更新任意数量的密钥
3. 使用新值重建url
4. 保留所有未更新的其他值
5. 它没有标准的已知密钥集,可能会根据URL进行更改

Answer 1

以这种方式获取查询字符串值,并使用$ .param重建查询字符串

更新:

这是一个例子,也检查小提琴:

  function getQueryVariable(url, variable) {
  	 var query = url.substring(1);
     var vars = query.split('&');
     for (var i=0; i<vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
     }

     return false;
  }

  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';
       
  var w = getQueryVariable(url, 'w');
  var h = getQueryVariable(url, 'h');
  var bg = getQueryVariable(url, 'bg');

  // http://www.example.com/hello.png?w=200&h=200&bg=white
  var params = { 'w':200, 'h':200, 'bg':bg };
  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

您可以更改函数以使用当前URL:

  function getQueryVariable(variable) {
  	 var query = window.location.search.substring(1);
     var vars = query.split('&');
     for (var i=0; i<vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
     }

     return false;
  }

Answer 2

//update URL Parameter
function updateURL(key,val){
    var url = window.location.href;
    var reExp = new RegExp("[\?|\&]"+key + "=[0-9a-zA-Z\_\+\-\|\.\,\;]*");

    if(reExp.test(url)) {
        // update
        var reExp = new RegExp("[\?&]" + key + "=([^&#]*)");
        var delimiter = reExp.exec(url)[0].charAt(0);
        url = url.replace(reExp, delimiter + key + "=" + val);
    } else {
        // add
        var newParam = key + "=" + val;
        if(!url.indexOf('?')){url += '?';}

        if(url.indexOf('#') > -1){
            var urlparts = url.split('#');
            url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');
        } else {
            url += "&" + newParam;
        }
    }
    window.history.pushState(null, document.title, url);
}

Answer 3

简单的解决方案

您可以使用如下所示的URLSearchParams.set（）：

var currentUrl = 'http://www.example.com/hello.png?w=100&h=100&bg=white';
var url = new URL(currentUrl);
url.searchParams.set("w", "200"); // setting your param
var newUrl = url.href; 
console.log(newUrl);

在线演示（jsfiddle）

Answer 4

我最喜欢阿里的回答。我将代码清理成一个函数，并认为我会分享它以使其他人的生活更轻松。希望这可以帮助某人。

function addParam(currentUrl,key,val) {
    var url = new URL(currentUrl);
    url.searchParams.set(key, val);
    return url.href; 
}