1

Tenho uma URL que poderá ou não conter parâmetros nela. Ex: www.site.com.br/?id=1 ou www.site.com.br.

Preciso verificar se existe algum parametro nesta URL e com isso poder acrescentar mais um no final. Por ex:

  • Se URL for www.site.com.br vira www.site.com.br/?id=1
  • Se URL for www.site.com.br/?utm=teste vira www.site.com.br/?utm=teste&id=1

Ou seja, a URL poderá ou não ter um parâmetro e esse parâmetro poderá ser aleatório, com isso não tenho como saber exatamente qual o parâmetro terei.

Preciso saber isso, pois preciso adicionar um parâmetro id=SC no fim da URL e em algumas vezes está dando erro, pois já existe um parâmetro anterior. Veja como estou fazendo:

//Pego a url anterior que o usuário estava e redireciono para a mesma url porém adicionando um parametro no final    
window.location.href = document.referrer+'?id=CS';

Com o código acima, se a URL anterior for www.site.com.br/?utm=teste a nova URL ficará site.com.br/?utm=teste?id=CS e o usuário não conseguirá acessar a página.

4 Respostas 4

5

Basta usar SearchParams.set().

var url="";

//COM parametro id na url, substitui o valor
url = new URL('http://www.site.com.br/?utm=teste&id=12');
   url.searchParams.set('id', 'SC');
    console.log(url.toString());

//SEM parametro id na url, acrescenta o parametro e respectivo valor
// já separado com &
url = new URL('http://www.site.com.br/?utm=teste');
    url.searchParams.set('id', 'SC');
    console.log(url.toString());
    
//SEM parametros na url acrescenta o parametro e respectivo valor
//com a interrogação (?)
url = new URL('http://www.site.com.br');
    url.searchParams.set('id', 'SC');
    console.log(url.toString());

 // com anchor
   url = new URL('http://www.site.com.br/?utm=teste&id=12#secao');
   url.searchParams.set('id', 'SC');
    console.log(url.toString());

2
  • É uma solução também, mas não gosto dessas APIs porque não funciona no IEca.
    – Sam
    10/09/2018 às 18:22
  • 3
    @sam hahaha, só fazer assim: if(isIE == true){ use o do tio sam}else{use o do vô leo} :)
    – user60252
    10/09/2018 às 18:27
2

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

1
  • Se quiser pegar o domínio dinamicamente também pode usar o document.domain, no caso de não querer algo fixo no new URL. 10/09/2018 às 16:49
1

Pode verificar com regex se no document.referrer possui o padrão:

?qualquer_coisa=

Se for verdadeiro, concatena &, se for falso, concatena ?:

var ref = document.referrer;
window.location.href = ref + (/\?.{1,}=/.test(ref) ? '&' : '?') + 'id=CS';
1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    11/09/2018 às 14:24
1

Acho que sua própria lógica já indica que o que você precisa fazer é um if. Ex:

if(document.referrer.contains("/?")){
window.location.href = document.referrer+'?id=CS'
}
else{
window.location.href = document.referrer+'&id=CS'
}
2
  • mas e se a url anterior for por ex: site.com.br/teste/p?utm=teste ou seja, não posso colocar uma regra fixa...poderia pesquisar apenas se existe a "?" na url, mas não sei se seria certo 10/09/2018 às 16:43
  • Pq a url dessa pagina é amigavel, ou seja, cada uma é de um jeito. Vai que na url amigavel tenha "?" acho dificil, mas vai saber 10/09/2018 às 16:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .