用javascript我怎么能添加一个查询字符串参数的url，如果不存在或如果它存在，更新当前值?我使用jquery为我的客户端开发。
当前回答
根据@ellemayo给出的答案，我提出了以下解决方案，如果需要，可以禁用散列标签:
function updateQueryString(key, value, options) {
if (!options) options = {};
var url = options.url || location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash;
hash = url.split('#');
url = hash[0];
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null) {
url = url.replace(re, '$1' + key + "=" + value + '$2$3');
} else {
url = url.replace(re, '$1$3').replace(/(&|\?)$/, '');
}
} else if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
url = url + separator + key + '=' + value;
}
if ((typeof options.hash === 'undefined' || options.hash) &&
typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
这样叫它:
updateQueryString('foo', 'bar', {
url: 'http://my.example.com#hash',
hash: false
});
结果:
http://my.example.com?foo=bar
其他回答
我写了下面的函数来实现我想要实现的:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
更新(2020):URLSearchParams现在被所有现代浏览器支持。
URLSearchParams实用程序可以与window.location.search结合使用。例如:
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search);
searchParams.set("foo", "bar");
window.location.search = searchParams.toString();
}
现在foo被设置为bar，不管它是否已经存在。
然而，上面给window.location.search的赋值会导致页面加载，所以如果这不是理想的，使用历史API如下所示:
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search)
searchParams.set("foo", "bar");
var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
history.pushState(null, '', newRelativePathQuery);
}
现在您不需要编写自己的正则表达式或逻辑来处理可能存在的查询字符串。
然而，浏览器对它的支持很差，因为它目前还处于试验阶段，只在最新版本的Chrome、Firefox、Safari、iOS Safari、Android浏览器、Android Chrome和Opera中使用。如果你决定使用它，使用一个填充。
我知道这是相当旧的，但我想把我的工作版本在这里。
function addOrUpdateUrlParam(uri, paramKey, paramVal) { var re = new RegExp("([?&])" + paramKey + "=[^&#]*", "i"); if (re.test(uri)) { uri = uri.replace(re, '$1' + paramKey + "=" + paramVal); } else { var separator = /\?/.test(uri) ? "&" : "?"; uri = uri + separator + paramKey + "=" + paramVal; } return uri; } jQuery(document).ready(function($) { $('#paramKey,#paramValue').on('change', function() { if ($('#paramKey').val() != "" && $('#paramValue').val() != "") { $('#uri').val(addOrUpdateUrlParam($('#uri').val(), $('#paramKey').val(), $('#paramValue').val())); } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input style="width:100%" type="text" id="uri" value="http://www.example.com/text.php"> <label style="display:block;">paramKey <input type="text" id="paramKey"> </label> <label style="display:block;">paramValue <input type="text" id="paramValue"> </label>
说明修改后的@elreimundo
如果它没有设置或想要更新一个新值，您可以使用:
window.location.search = 'param=value'; // or param=new_value
这是用简单Javascript写的。
EDIT
你可能想尝试使用jquery查询对象插件
窗口.位置.搜索 = jQuery.query.set（“param”， 5）;
Window.location.search是读/写的。
然而，修改查询字符串将重定向您所在的页面，并导致从服务器刷新。
如果您试图做的是维护客户端状态(并可能使其可书签)，您将希望修改URL散列而不是查询字符串，这将使您保持在同一页面(window.location。哈希是读/写)。像twitter.com这样的网站就是这样做的。
你还想让后退按钮工作，你必须将javascript事件绑定到哈希更改事件，一个很好的插件是http://benalman.com/projects/jquery-hashchange-plugin/
