Uma alternativa é usar new URL(endereco)
para criar um objeto URL
e depois usar um URLSearchParams
para manipular os parâmetros da URL.
Através do método set
é possível adicionar o novo parâmetro. Depois basta atualizá-lo na URL:
// URL sem parâmetros
var url = new URL('http://www.site.com.br');
var sp = new URLSearchParams(url.search);
sp.set('id', '1')
url.search = sp;
console.log(url.toString()); // http://www.site.com.br/?id=1
//--------------------------------------
// URL com parâmetro
url = new URL('http://site.com.br/teste/p?utm=teste');
sp = new URLSearchParams(url.search);
sp.set('id', '1')
url.search = sp;
console.log(url.toString()); // http://site.com.br/teste/p?utm=teste&id=1
O detalhe é que o endereço deve ter o protocolo (http://etc...
, https://etc...
, ftp://etc...
), caso contrário new URL
dá erro - ou seja, new URL('http://www.abc.com')
e new URL('https://www.abc.com')
funciona, mas new URL('www.abc.com')
dá erro.
Para manipular a URL atual, você pode fazer var url = new URL(window.location)
. Depois você adiciona os parâmetros que precisa (usando set
) e por fim faz window.location = url
:
var url = new URL(window.location);
var sp = new URLSearchParams(url.search);
sp.set('id', '1')
url.search = sp;
window.location = url;
Obs: caso a URL já possua um parâmetro id
, o set
sobrescreverá seu valor:
// já tem id=2
var url = new URL('http://www.site.com.br/?id=2');
var sp = new URLSearchParams(url.search);
sp.set('id', '1')
url.search = sp;
// sobrescreve o valor de id para 1
console.log(url.toString()); // http://www.site.com.br/?id=1
Se for o caso, você pode verificar se já existe o parâmetro id
usando if (sp.has('id'))
Usar regex e adicionar o parâmetro no final pode funcionar para a maioria dos casos, mas se a URL tiver anchor, não vai funcionar. Isso porque o anchor fica no final (ver aqui e aqui).
Por exemplo, se a URL for http://www.site.com/?teste=1#secao
. Se eu simplesmente adicionar o parâmetro no final, a URL ficará http://www.site.com/?teste=1#secao&id=1
, o que não é o desejado, já que neste caso o id=1
não faz parte da query string. Usando URLSearchParams
você obtém o resultado correto, que é http://www.site.com/?teste=1&id=1#secao
, veja:
// tem anchor "#secao"
var url = new URL('http://www.site.com/?teste=1#secao');
var sp = new URLSearchParams(url.search);
sp.set('id', '1')
url.search = sp;
// adiciona o id na posição correta (antes do anchor)
console.log(url.toString()); // http://www.site.com/?teste=1&id=1#secao
Apenas para deixar mais claro a diferença:
// tem anchor "#secao"
var url = new URL('http://www.site.com/?teste=1&id=1#secao');
var sp = new URLSearchParams(url.search);
// imprime teste=1 e id=1
for (var [nome, valor] of sp.entries()) {
console.log(`${nome}=${valor}`);
}
console.log(url.hash); // #secao
console.log('----------------');
// se adicionar o parâmetro depois do anchor, não funciona
url = new URL('http://www.site.com/?teste=1#secao&id=1');
sp = new URLSearchParams(url.search);
// só vai imprimir teste=1
for (var [nome, valor] of sp.entries()) {
console.log(`${nome}=${valor}`);
}
// tudo que está depois do # é o anchor
console.log(url.hash); // #secao&id=1
Repare que quando a URL é http://www.site.com/?teste=1#secao&id=1
, somente o teste
é reconhecido como parâmetro da query string. Já tudo que está depois do #
(no caso, secao&id=1
) faz parte do anchor (ou seja, se apenas concatenar &id=1
no final da string, este não é reconhecido como parâmetro).
Por isso que concatenar no final não é garantido que funcione em 100% dos casos.
Atualmente, esta API funciona bem no Firefox, Chrome, Edge e Safari, mas não no IE 11: https://caniuse.com/#search=URLSearchParams