使用jQuery更新现有的URL查询字符串值
假设我有一个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与新的请求参数？
所以：
- 获取每个查询字符串键的值
- 更新任意数量的密钥
- 使用新值重建url
- 保留所有未更新的其他值
- 它没有标准的已知密钥集，它可能会根据URL进行更改
以这种方式获取查询字符串值，并使用$ .param重建查询字符串
更新：
这是一个例子，也检查小提琴 ：
function getQueryVariable(url, variable) { var query = url.substring(1); var vars = query.split('&'); for (var i=0; i
另一种方式（独立于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);
//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); }
简单解决方案
您可以使用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）
我的url是这样的： 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;
这就是它对我有用的方式。
另一种方法是你可以这样做，使用Samuel Santos的一些简单的注册代码，如下所示：
/* * 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;
现在您可以创建一个新URL：
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;
或做任何你想要的:)
你可以这样做：
// 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'; }
问候