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使用新的查询字符串？

所以：

获取每个查询字符串键的值
更新任意数量的密钥
使用新值重建网址
保留所有未更新的其他值
它没有标准的已知密钥集，可能会根据网址进行更改

Answer 1

获取此way的查询字符串值并使用$.param重建查询字符串

更新：

这是一个示例，也请检查fiddle：

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

您可以将功能更改为使用当前网址：

  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

另一种方式（独立于jQuery或其他库）：https://github.com/Mikhus/jsurl

var u = new Url;
// or
var u = new Url('/some/path?foo=baz');
alert(u);
u.query.foo = 'bar';
alert(u);

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

Online demo (jsfiddle)

Answer 4

我的网址如下：http://localhost/dentistryindia/admin/hospital/add_procedure?hid=241&hpr_id=12

var reExp = /hpr_id=\\d+/;
var url = window.location.href;
url = url.toString(); 
var hrpid = $("#category :selected").val(); //new value to replace hpr_id
var reExp = new RegExp("[\\?&]" + 'hpr_id' + "=([^&#]*)"),
delimeter = reExp.exec(url)[0].charAt(0),
newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid);
window.location.href = newUrl;

这就是它对我有用的方式。

Answer 5

另一种方法，你可以使用Samuel Santos here这样的简单注册代码：

/*
 * queryParameters -> handles the query string parameters
 * queryString -> the query string without the fist '?' character
 * re -> the regular expression
 * m -> holds the string matching the regular expression
 */
var queryParameters = {}, queryString = location.search.substring(1),
        re = /([^&=]+)=([^&]*)/g, m;

// Creates a map with the query string parameters
while (m = re.exec(queryString)) {
    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

// Update w and h
queryParameters['w'] = 200;
queryParameters['h'] = 200;

现在您可以创建新网址：

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname;

// Build new Query String
var params = $.param(queryParameters);
if (params != '') {
    url = url + '?' + params;
}

或者你可以使用params让浏览器立即重新加载：

location.search = params;

或做任何你想做的事情：）

Answer 6

你可以这样做：

// If key exists updates the value
if (location.href.indexOf('key=') > -1) {
    location.href = location.href.replace('key=current_val', 'key=new_val');

// If not, append
} else {
     location.href = location.href + '&key=new_val';
}

此致

Answer 7

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

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

Answer 8

URI.js似乎是我的最佳方法 http://medialize.github.io/URI.js/

let uri = URI("http://test.com/foo.html").addQuery("a", "b");
// http://test.com/foo.html?a=b
uri.addQuery("c", 22);
// http://test.com/foo.html?a=b&c=22
uri.hash("h1");
// http://test.com/foo.html?a=b&c=22#h1
uri.hash("h2");
// http://test.com/foo.html?a=b&c=22#h2

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

8 个答案: