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

Posted 2023-03-10

【中文标题】使用 jQuery 更新现有的 URL 查询字符串值

【英文标题】：Updating existing URL querystring values with jQuery

【发布时间】：2012-03-26 04:54:24

【问题描述】：

假设我有一个网址，例如：

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

【参考方案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;
  

【讨论】：

如果我们只需要更新一些变量并且我们在 url 中有很多变量我们不会更新？

【参考方案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);

【讨论】：

这个库现在被称为domurl。 GitHub 正在重定向到正确的存储库，只是在此处发布以防万一发生变化。

【参考方案3】：

我的网址是这样的：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;

这就是它对我的工作方式。

【参考方案4】：

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

【讨论】：

这是一个方便的函数，但如果 url 从一开始就没有查询参数，但哈希一个 '#'，它将不起作用。您可以通过将 indexOf 行更改为 (url.indexOf('?') === -1)

来解决此问题

（如果只有一个url参数，也会输出?&key=val）

【参考方案5】：

您可以通过另一种方式做到这一点，使用 Samuel Santos here 的一些简单的 reg ex 代码，如下所示：

/*
 * 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;

或者您可以使用参数来立即重新加载浏览器：

location.search = params;

或者做任何你想做的事:)

【参考方案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';

问候

【讨论】：

这只有在您想要刷新页面并且冒着无限循环的风险时才有效。

【参考方案7】：

简单的解决方案

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

【参考方案8】：

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

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

【讨论】：

谢谢 - 这为我提供了一个有用的小实用方法，可以包含在项目中，并解决了我的需求。

我是新手，你有例子吗？我正在尝试将我的活动标题放入表单的隐藏字段中。我的表单可以从 url 获取参数，但我无法将标题转换为参数....而且我不知道这是否是最好的方法:)

【参考方案9】：

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