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.toString();
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.toString();
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...
), caso contrário new URL
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.toString();
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.toString();
// 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 caso a URL tenha anchors, não vai funcionar.
Ex: http://www.site.com/?teste=1#secao
.
Se simplesmente adicionar o parâmetro no final, a URL ficará http://www.site.com/?teste=1#secao&id=1
, o que é inválido. Usando URLSearchParams
você obtém o resultado correto, que é http://www.site.com/?teste=1&id=1#secao
.
Atualmente, esta API funciona bem no Firefox, Chrome, Edge e Safari, mas não no IE 11: https://caniuse.com/#search=URLSearchParams