生成的URL：
寻找一种JavaScript函数，它可以解析URL的每个参数，然后添加新参数或更新已存在参数的值。http://server/myapp.php?id=10&enabled=true
您可以使用以下之一：
示例：
var url = new URL("http://foo.bar/?x=1&y=2");
// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);
// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);
XML添加到 http://foo.bar/?x=1&y=2，以便最终结果是 http://foo.bar/?x=1&y=2&XML。这可能吗？ 我尝试过url.searchParams.set('XML');、url.searchParams.set('XML', null);和url.searchParams.set('XML', undefined);，但在Chrome 63中都不起作用。 - Abdullurl.searchParams 是对一个只读的 URLSearchParams 对象的引用。这意味着你不能这样做：url.searchParam = new URLSearchParam();但你可以使用 .set() 方法直接修改对象内容，就像这样：const a = {b: 0}你不能修改引用本身：a = {b: 1}但是你可以直接在原地修改对象的属性：a.b = 1在你的 JS 控制台中试一下！;-) - Vianney Bajartconst urlParams = new URLSearchParams(window.location.search);
urlParams.set('order', 'date');
window.location.search = urlParams;
.set方法的第一个参数是键，第二个参数是值。
注意：Internet Explorer的任何版本都不支持此功能（但在Edge中支持）
一个基本的实现，您需要进行调整，看起来像这样：
function insertParam(key, value) {
key = encodeURIComponent(key);
value = encodeURIComponent(value);
// kvp looks like ['key1=value1', 'key2=value2', ...]
var kvp = document.location.search.substr(1).split('&');
let i=0;
for(; i<kvp.length; i++){
if (kvp[i].startsWith(key + '=')) {
let pair = kvp[i].split('=');
pair[1] = value;
kvp[i] = pair.join('=');
break;
}
}
if(i >= kvp.length){
kvp[kvp.length] = [key,value].join('=');
}
// can return this or...
let params = kvp.join('&');
// reload page with new params
document.location.search = params;
}
相比使用正则表达式或搜索方法，这个方法大约快两倍，但这完全取决于查询字符串的长度和匹配项的索引。
出于完整性考虑，我进行了基准测试并与较慢的正则表达式方法进行了比较（大约慢150%）
function insertParam2(key,value)
{
key = encodeURIComponent(key); value = encodeURIComponent(value);
var s = document.location.search;
var kvp = key+"="+value;
var r = new RegExp("(&|\\?)"+key+"=[^\&]*");
s = s.replace(r,"$1"+kvp);
if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};
//again, do what you will here
document.location.search = s;
}
encodeURIComponent 而不是 encodeURI，否则在你的名称或值中包含 =、& 等字符会破坏 URI。 - Adrian Pronk这是一个非常简单的解决方案。它不控制参数的存在，并且不更改现有的值。它将您的参数添加到末尾，因此您可以在后端代码中获取最新的值。
function addParameterToURL(param){
_url = location.href;
_url += (_url.split('?')[1] ? '&':'?') + param;
return _url;
}
url = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+part+"&"+url.split("?")[1] : (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+part+"#"+ url.split("#")[1] : url+'?'+part)); - kanzurehttps://localhost/preview/inventory.html?sortci=priceASC&sortci=priceASC&sortci=stitle。 - Jay感谢大家的贡献。我使用了annakata的代码，并进行了修改，以便在URL中根本没有查询字符串的情况下也可以使用。
function insertParam(key, value) {
key = escape(key); value = escape(value);
var kvp = document.location.search.substr(1).split('&');
if (kvp == '') {
document.location.search = '?' + key + '=' + value;
}
else {
var i = kvp.length; var x; while (i--) {
x = kvp[i].split('=');
if (x[0] == key) {
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if (i < 0) { kvp[kvp.length] = [key, value].join('='); }
//this will reload the page, it's likely better to store this until finished
document.location.search = kvp.join('&');
}
}
encodeURIComponent函数替换escape（key）和escape（value）。 - kolobokif (kvp.length==1 && kvp[0]="") 吗？ - Charles L.if (document.location.search)。 - Lyubimov Roman这是一个大幅简化的版本，为了易读性和减少代码行数而做出了一些权衡，而非微小优化性能（实际上我们在谈论几毫秒的差异……由于操作当前文档位置的特性，这很可能只会在页面上运行一次）。
/**
* Add a URL parameter (or changing it if it already exists)
* @param {search} string this is typically document.location.search
* @param {key} string the key to set
* @param {val} string value
*/
var addUrlParam = function(search, key, val){
var newParam = key + '=' + val,
params = '?' + newParam;
// If the "search" string exists, then build params from it
if (search) {
// Try to replace an existance instance
params = search.replace(new RegExp('([?&])' + key + '[^&]*'), '$1' + newParam);
// If nothing was replaced, then add the new param to the end
if (params === search) {
params += '&' + newParam;
}
}
return params;
};
然后你可以像这样使用它：
document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');
([\?&]) 替换 [\?&] 就行了（我本来可以自己编辑的，但不确定社区政策是否允许修复答案中的错误）。 - opyhURL类内置了一个函数，您可以使用它轻松处理查询字符串键/值参数：
const url = new URL(window.location.href);
// url.searchParams has several function, we just use `set` function
// to set a value, if you just want to append without replacing value
// let use `append` function
url.searchParams.set('key', 'value');
console.log(url.search) // <== '?key=value'
// if window.location.href has already some qs params this `set` function
// modify or append key/value in it
了解更多有关searchParams 函数的信息。
URL 在 IE 中不受支持，请查看兼容性。
/**
* Add a URL parameter
* @param {string} url
* @param {string} param the key to set
* @param {string} value
*/
var addParam = function(url, param, value) {
param = encodeURIComponent(param);
var a = document.createElement('a');
param += (value ? "=" + encodeURIComponent(value) : "");
a.href = url;
a.search += (a.search ? "&" : "") + param;
return a.href;
}
/**
* Add a URL parameter (or modify if already exists)
* @param {string} url
* @param {string} param the key to set
* @param {string} value
*/
var addOrReplaceParam = function(url, param, value) {
param = encodeURIComponent(param);
var r = "([&?]|&)" + param + "\\b(?:=(?:[^&#]*))*";
var a = document.createElement('a');
var regex = new RegExp(r);
var str = param + (value ? "=" + encodeURIComponent(value) : "");
a.href = url;
var q = a.search.replace(regex, "$1"+str);
if (q === a.search) {
a.search += (a.search ? "&" : "") + str;
} else {
a.search = q;
}
return a.href;
}
url = "http://www.example.com#hashme";
newurl = addParam(url, "ciao", "1");
alert(newurl);http://abc.def/?a&b&b）。 - Adam Leggett我有一个做这件事的“类”，以下是它:
function QS(){
this.qs = {};
var s = location.search.replace( /^\?|#.*$/g, '' );
if( s ) {
var qsParts = s.split('&');
var i, nv;
for (i = 0; i < qsParts.length; i++) {
nv = qsParts[i].split('=');
this.qs[nv[0]] = nv[1];
}
}
}
QS.prototype.add = function( name, value ) {
if( arguments.length == 1 && arguments[0].constructor == Object ) {
this.addMany( arguments[0] );
return;
}
this.qs[name] = value;
}
QS.prototype.addMany = function( newValues ) {
for( nv in newValues ) {
this.qs[nv] = newValues[nv];
}
}
QS.prototype.remove = function( name ) {
if( arguments.length == 1 && arguments[0].constructor == Array ) {
this.removeMany( arguments[0] );
return;
}
delete this.qs[name];
}
QS.prototype.removeMany = function( deleteNames ) {
var i;
for( i = 0; i < deleteNames.length; i++ ) {
delete this.qs[deleteNames[i]];
}
}
QS.prototype.getQueryString = function() {
var nv, q = [];
for( nv in this.qs ) {
q[q.length] = nv+'='+this.qs[nv];
}
return q.join( '&' );
}
QS.prototype.toString = QS.prototype.getQueryString;
//examples
//instantiation
var qs = new QS;
alert( qs );
//add a sinle name/value
qs.add( 'new', 'true' );
alert( qs );
//add multiple key/values
qs.add( { x: 'X', y: 'Y' } );
alert( qs );
//remove single key
qs.remove( 'new' )
alert( qs );
//remove multiple keys
qs.remove( ['x', 'bogus'] )
alert( qs );
如果您有一个包含URL的字符串，想要添加参数进行修饰，您可以尝试这个一行代码：
urlstring += ( urlstring.match( /[\?]/g ) ? '&' : '?' ) + 'param=value';
urlstring中已经有?，则&将成为前缀。如果您没有在代码中硬编码的参数，而是在paramvariable中，或者其中包含有趣的字符，我也建议使用encodeURI(paramvariable)。请参阅JavaScript URL 编码了解encodeURI函数的用法。