Com javascript, como posso adicionar um parâmetro de string de consulta ao URL, se não estiver presente ou se estiver presente, atualize o valor atual? Estou usando o jquery para o desenvolvimento do lado do cliente.
javascript
jquery
query-string
amador
fonte
fonte
String#split
utiliza um segundo parâmetro para divisões máximas. O jQuerymap
também será útil.Respostas:
Eu escrevi a seguinte função que realiza o que eu quero alcançar:
fonte
[?|&]
deve ser[?&]
var
pouco antes da declaração do separador.value = encodeURIComponent(value);
na primeira linha, caso contrário, as quebras de linha não serão escapadas corretamente.Expandi a solução e a combinei com outra que encontrei para substituir / atualizar / remover os parâmetros da string de consulta com base na entrada do usuário e levando em consideração a âncora dos URLs.
Não fornecer um valor removerá o parâmetro, fornecer um adicionará / atualizará o parâmetro. Se nenhum URL for fornecido, ele será acessado da janela window.location
Atualizar
Ocorreu um erro ao remover o primeiro parâmetro na string de consulta, refiz o regex e testei para incluir uma correção.
Segunda atualização
Conforme sugerido por @ JarónBarends - Tweak value check para comparar com undefined e null para permitir definir 0 valores
Terceira atualização
Houve um erro no qual remover uma variável de querystring diretamente antes que uma hashtag perdesse o símbolo da hashtag que foi corrigido
Quarta atualização
Obrigado @rooby por apontar uma otimização de regex no primeiro objeto RegExp. Defina regex inicial como ([? &]) Devido a um problema ao usar (\? | &) Encontrado por @YonatanKarni
Quinta Atualização
Removendo a declaração de hash var na instrução if / else
fonte
value
fará isso para remover variáveis da querystring quando definir o seu valor para 0. Assim em vez deif (value) {}
você deve usarif (typeOf value !== 'undefined' && value !== null) {}
hash
é declarada duas vezes;)O utilitário URLSearchParams pode ser útil para isso em combinação com
window.location.search
. Por exemplo:Agora
foo
foi definido comobar
independentemente de já existir ou não.No entanto, a atribuição acima
window.location.search
causará um carregamento de página; portanto, se isso não for desejável, use a API do histórico da seguinte maneira:Agora você não precisa escrever sua própria regex ou lógica para lidar com a possível existência de cadeias de consulta.
No entanto, o suporte ao navegador é ruim, pois atualmente é experimental e só é usado nas versões recentes do Chrome, Firefox, Safari, iOS Safari, Navegador Android, Android Chrome e Opera. Use com um polyfill se você decidir usá-lo.
Atualização: o suporte ao navegador melhorou desde a minha resposta original.
fonte
Unable to set property '__URLSearchParams__:0.8503766759030615' of undefined or null reference
no ie11 você recebe esse erro. não é um preenchimento de polly se não funcionar como um substituto.newRelativePathQuery
truque:var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString() + window.location.hash;
Com base na resposta do @ amateur (e agora incorporando a correção do comentário @j_walker_dev), mas levando em consideração o comentário sobre as tags hash no URL, eu uso o seguinte:
Editado para corrigir
[?|&]
no regex, que obviamente deve ser[?&]
o indicado nos comentáriosEditar: versão alternativa para suportar a remoção de parâmetros de URL também. Eu usei
value === undefined
como o caminho para indicar a remoção. Pode usarvalue === false
ou mesmo um parâmetro de entrada separado, conforme desejado.Veja em ação em https://jsfiddle.net/bp3tmuxh/1/
fonte
var separator
linha para a direita acima do retorno corrige um erro com "/ app # / cool? Fun = true". Isso escolheria um "&" como separador, mesmo que ainda não haja parâmetros reais de cadeia de caracteres de consulta. Somente clientes.[?|&]
deve ser justo[?&]
(caso contrário, corresponderá|
)."([?|&])"
não é bom. Corrija isso como quervar re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");
ouvar re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
(uma extensão agradável de outras maneiras!)var re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");
não funciona, o segundo fazAqui está minha biblioteca para fazer isso: https://github.com/Mikhus/jsurl
fonte
Sei que essa pergunta é antiga e foi respondida até a morte, mas aqui está minha facada. Estou tentando reinventar a roda aqui porque estava usando a resposta atualmente aceita e o manuseio incorreto dos fragmentos de URL recentemente me mordeu em um projeto.
A função está abaixo. É bastante longo, mas foi feito para ser o mais resiliente possível. Eu adoraria sugestões para encurtá-lo / melhorá-lo. Eu montei uma pequena suíte de testes jsFiddle para ele (ou outras funções semelhantes). Se uma função pode passar em todos os testes lá, eu digo que provavelmente é bom ir.
Atualização: deparei-me com uma função interessante para usar o DOM para analisar URLs , então incorporei essa técnica aqui. Torna a função mais curta e mais confiável. Adereços para o autor dessa função.
fonte
window.location.search é leitura / gravação.
No entanto, modificar a string de consulta redirecionará a página em que você está e causará uma atualização do servidor.
Se o que você está tentando fazer é manter o estado do lado do cliente (e potencialmente torná-lo compatível com favoritos), convém modificar o hash da URL em vez da string de consulta, que mantém você na mesma página (window.location. hash é leitura / gravação). É assim que sites como o twitter.com fazem isso.
Você também deseja que o botão voltar funcione, terá que vincular eventos javascript ao evento de alteração de hash, um bom plugin para isso é http://benalman.com/projects/jquery-hashchange-plugin/
fonte
Se não estiver definido ou desejar atualizar com um novo valor, você poderá usar:
A propósito, isso é em Javascript simples.
EDITAR
Você pode tentar usar o plugin jquery query-object
fonte
Aqui está minha abordagem: A
location.params()
função (mostrada abaixo) pode ser usada como getter ou setter. Exemplos:Dado que o URL é
http://example.com/?foo=bar&baz#some-hash
,location.params()
irá retornar um objeto com todos os parâmetros de consulta:{foo: 'bar', baz: true}
.location.params('foo')
retornará'bar'
.location.params({foo: undefined, hello: 'world', test: true})
alterará o URL parahttp://example.com/?baz&hello=world&test#some-hash
.Aqui está a
params()
função, que pode opcionalmente ser atribuída aowindow.location
objeto.fonte
Essa é a minha preferência e abrange os casos em que consigo pensar. Alguém pode pensar em uma maneira de reduzi-lo a uma única substituição?
fonte
Eu sei que isso é bastante antigo, mas eu quero disparar minha versão de trabalho aqui.
NOTA Esta é uma versão modificada do @elreimundo
fonte
Minha opinião a partir daqui (compatível com "use strict"; realmente não usa jQuery):
Exemplo de uso:
fonte
Com base na resposta que @ellemayo deu, criei a seguinte solução que permite desativar a tag hash, se desejado:
Chame assim:
Resulta em:
fonte
typeof value !== 'undefined' && value !== null
é mais explícita, masvalue != null
significa a mesma coisa e é mais concisa.Aqui está uma versão mais curta que cuida de
Código:
A descrição do regex pode ser encontrada aqui .
NOTA : Esta solução é baseada na resposta @amateur, mas com muitas melhorias.
fonte
Código que anexa uma lista de parâmetros a um URL existente usando ES6 e jQuery:
Onde listOfParams é como
Exemplo de uso:
Testes rápidos:
fonte
Uma abordagem diferente sem usar expressões regulares . Suporta âncoras 'hash' no final do URL, bem como vários caracteres de interrogação (?). Deve ser um pouco mais rápido que a abordagem de expressão regular.
fonte
Use esta função para adicionar, remover e modificar parâmetros de string de consulta do URL com base em jquery
Adicione novo e modifique o parâmetro existente para o URL
Remover existente
fonte
Usando
jQuery
podemos fazer como abaixoNa variável
new_url
, teremos novos parâmetros de consulta.Referência: http://api.jquery.com/jquery.param/
fonte
Para dar um exemplo de código para modificar,
window.location.search
conforme sugerido por Gal e tradyblix:fonte
Código de script Java para localizar uma sequência de consulta específica e substituir seu valor *
fonte
Sim, eu tive um problema em que minha string de consulta iria estourar e duplicar, mas isso ocorreu devido à minha própria lentidão. então eu toquei um pouco e trabalhei com js jquery (realmente chiar) e C # magick.
Então, acabei de perceber que, após o servidor concluir os valores passados, os valores não importam mais, não há reutilização; se o cliente quisesse fazer a mesma coisa, evidentemente, sempre haverá uma nova solicitação, mesmo que seja a mesmos parâmetros sendo passados. E isso é tudo do lado do cliente, portanto, alguns cache / cookies etc. podem ser legais nesse sentido.
JS:
HTML:
C #:
Sem duplicatas, cada solicitação é única como você a modificou e, devido à forma como isso é estruturado, é fácil adicionar mais consultas dinamicamente dentro do domínio.
fonte
Aqui está um método alternativo usando as propriedades embutidas do elemento HTML âncora:
fonte
se você deseja definir vários parâmetros de uma vez:
mesma função que @ amateur
Se o jslint fornecer um erro, adicione isso após o loop for
fonte
http://abc.def/?a&b&c
).Há muitas respostas estranhas e desnecessariamente complicadas nesta página. O mais bem classificado, @ amador, é muito bom, embora tenha um pouco de cotão desnecessário no RegExp. Aqui está uma solução um pouco mais ideal com o RegExp mais limpo e uma
replace
chamada mais limpa :Como um bônus adicional, se
uri
não for uma string, você não receberá erros por tentar chamarmatch
oureplace
algo que pode não implementar esses métodos.E se você quiser lidar com o caso de um hash (e você já fez uma verificação de HTML formatado corretamente), poderá aproveitar a função existente em vez de escrever uma nova função contendo a mesma lógica:
Ou você pode fazer algumas pequenas alterações na excelente resposta de @ Adam:
fonte
separator
não está definido emupdateQueryStringParamsNoHash
. EmupdateQueryStringParameter
, tudo quebra se o parâmetro que você está substituindo não recebe um valor (por exemplohttp://abc.def/?a&b&c
).Isso deve servir ao propósito:
fonte