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

Question

假设我有一个 url，例如：

 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 更改

原文由 adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
  }

原文由 dotoree 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

简单的解决方案

您可以像下面这样使用 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）

原文由 Ali Soltani 发布，翻译遵循 CC BY-SA 4.0 许可协议