用javascript我怎么能添加一个查询字符串参数的url，如果不存在或如果它存在，更新当前值?我使用jquery为我的客户端开发。
当前回答
我已经扩展了解决方案，并将其与另一个我发现的替换/更新/删除基于用户输入的查询字符串参数，并将url锚纳入考虑。
不提供值将删除参数，提供值将添加/更新参数。如果没有提供URL，它将从window.location中抓取
function UpdateQueryString(key, value, url) {
if (!url) url = window.location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
hash;
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null) {
return url.replace(re, '$1' + key + "=" + value + '$2$3');
}
else {
hash = url.split('#');
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
url += '#' + hash[1];
}
return url;
}
}
else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
hash = url.split('#');
url = hash[0] + separator + key + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
url += '#' + hash[1];
}
return url;
}
else {
return url;
}
}
}
更新
在删除查询字符串中的第一个参数时，有一个错误，我重新工作了正则表达式和测试，以包括修复。
第二次更新
根据@JarónBarends的建议-调整值检查检查undefined和null，以允许设置0值
第三次更新
有一个错误，在一个标签之前直接删除一个查询字符串变量将失去标签符号，这已被修复
第四次更新
感谢@rooby在第一个RegExp对象中指出正则表达式优化。 由于使用@YonatanKarni发现的(\?|&)问题，将初始正则表达式设置为([?&])
第五次更新
在if/else语句中删除声明哈希变量
其他回答
我已经扩展了解决方案，并将其与另一个我发现的替换/更新/删除基于用户输入的查询字符串参数，并将url锚纳入考虑。
不提供值将删除参数，提供值将添加/更新参数。如果没有提供URL，它将从window.location中抓取
function UpdateQueryString(key, value, url) {
if (!url) url = window.location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
hash;
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null) {
return url.replace(re, '$1' + key + "=" + value + '$2$3');
}
else {
hash = url.split('#');
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
url += '#' + hash[1];
}
return url;
}
}
else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
hash = url.split('#');
url = hash[0] + separator + key + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
url += '#' + hash[1];
}
return url;
}
else {
return url;
}
}
}
更新
在删除查询字符串中的第一个参数时，有一个错误，我重新工作了正则表达式和测试，以包括修复。
第二次更新
根据@JarónBarends的建议-调整值检查检查undefined和null，以允许设置0值
第三次更新
有一个错误，在一个标签之前直接删除一个查询字符串变量将失去标签符号，这已被修复
第四次更新
感谢@rooby在第一个RegExp对象中指出正则表达式优化。 由于使用@YonatanKarni发现的(\?|&)问题，将初始正则表达式设置为([?&])
第五次更新
在if/else语句中删除声明哈希变量
我意识到这个问题已经很老了，而且已经被回答得死去活来了，但我想尝试一下。我试图在这里重新发明轮子，因为我正在使用目前接受的答案和URL片段的错误处理，最近在一个项目中咬我一口。
函数如下。它很长，但它被设计得尽可能有弹性。我想听听缩短/改进它的建议。我为它(或其他类似的函数)组合了一个小型jsFiddle测试套件。如果一个函数可以通过每一个测试，我说它可能就可以运行了。
更新:我遇到了一个很酷的使用DOM解析url的函数，所以我在这里结合了这项技术。它使函数更短，更可靠。感谢函数的作者。
/**
* Add or update a query string parameter. If no URI is given, we use the current
* window.location.href value for the URI.
*
* Based on the DOM URL parser described here:
* http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
*
* @param (string) uri Optional: The URI to add or update a parameter in
* @param (string) key The key to add or update
* @param (string) value The new value to set for key
*
* Tested on Chrome 34, Firefox 29, IE 7 and 11
*/
function update_query_string( uri, key, value ) {
// Use window URL if no query string is provided
if ( ! uri ) { uri = window.location.href; }
// Create a dummy element to parse the URI with
var a = document.createElement( 'a' ),
// match the key, optional square brackets, an equals sign or end of string, the optional value
reg_ex = new RegExp( key + '((?:\\[[^\\]]*\\])?)(=|$)(.*)' ),
// Setup some additional variables
qs,
qs_len,
key_found = false;
// Use the JS API to parse the URI
a.href = uri;
// If the URI doesn't have a query string, add it and return
if ( ! a.search ) {
a.search = '?' + key + '=' + value;
return a.href;
}
// Split the query string by ampersands
qs = a.search.replace( /^\?/, '' ).split( /&(?:amp;)?/ );
qs_len = qs.length;
// Loop through each query string part
while ( qs_len > 0 ) {
qs_len--;
// Remove empty elements to prevent double ampersands
if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }
// Check if the current part matches our key
if ( reg_ex.test( qs[qs_len] ) ) {
// Replace the current value
qs[qs_len] = qs[qs_len].replace( reg_ex, key + '$1' ) + '=' + value;
key_found = true;
}
}
// If we haven't replaced any occurrences above, add the new parameter and value
if ( ! key_found ) { qs.push( key + '=' + value ); }
// Set the new query string
a.search = '?' + qs.join( '&' );
return a.href;
}
通过使用jQuery，我们可以做到如下所示
var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)
在变量new_url中我们将有新的查询参数。
参考:http://api.jquery.com/jquery.param/
这是一个简短的版本
使用或不使用给定参数查询 使用多个参数值查询 包含散列的查询
代码:
var setQueryParameter = function(uri, key, value) {
var re = new RegExp("([?&])("+ key + "=)[^&#]*", "g");
if (uri.match(re))
return uri.replace(re, '$1$2' + value);
// need to add parameter to URI
var paramString = (uri.indexOf('?') < 0 ? "?" : "&") + key + "=" + value;
var hashIndex = uri.indexOf('#');
if (hashIndex < 0)
return uri + paramString;
else
return uri.substring(0, hashIndex) + paramString + uri.substring(hashIndex);
}
正则表达式描述可以在这里找到。
注意:这个解决方案是基于@amateur的答案，但是有很多改进。
我写了下面的函数来实现我想要实现的:
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;
}
}
