Como obter valores de string de consulta em JavaScript

Valores de string de consulta em uma URL frequentemente fornecem informações sobre a solicitação, como parâmetros de pesquisa. Uma string de consulta pode ser usada para solicitar uma página da Web utilizando o protocolo HTTP. Ocasionalmente, você pode precisar buscar atributos de string de consulta em seu script. Além disso, saber como extrair os dados da string de consulta da URL é essencial se qualquer lógica de negócios ou solicitação for tratada no front-end.

Este blog definirá o procedimento para obter os valores da query string em JavaScript.

Como obter valores de string de consulta em JavaScript?

Para obter os valores da string de consulta em JavaScript, use os seguintes métodos:

Use a API de URL com o método get()
URLSearchParams com o método get()
URLSearchParams com o método values()

Método 1: obter valores de string de consulta usando a API de URL com o método get()

Use o ' URL API ' com o ' obter() ” para obter os valores da string de consulta em JavaScript. Um URL (Uniform Resource Locator) é uma maneira de encontrar um recurso específico da Internet. Normalmente é composto por um protocolo (como “ http ' ou ' https “), um nome de domínio (como “ exemplo.com “) e um caminho (como “ /caminho/para/recurso “). Os URLs são usados para acessar páginas da Web, baixar arquivos e acessar outros recursos, incluindo valores de string de consulta na Internet.

Exemplo
Crie uma variável que armazene a URL com strings de consulta:

era urlQueryString = 'https://www.example.com/page.html?keyword=SearchText &fullname=jennyConvey &click=Submit' ;

Chame o objeto URL passando o parâmetro “ urlQueryString ”:

era queryString = novo URL ( urlQueryString ) ;

Use o método get() passando a chave “ palavra-chave ” da consulta para obter seu valor com o atributo searchParams. A propriedade searchParams do objeto URL em JavaScript representa a string de consulta de uma URL. Ele fornece uma maneira de manipular a string de consulta de uma URL como um objeto em vez de uma string:

era valor1 = queryString. searchParams . obter ( 'palavra-chave' ) ;
console. registro ( 'valor da palavra-chave: ' + valor1 ) ;

Obtenha o segundo valor da string de consulta passando sua chave para o método get() e imprima no console:

era valor2 = queryString. searchParams . obter ( 'nome completo' ) ;
console. registro ( 'valor do nome completo: ' + valor2 ) ;

Da mesma forma, busque o terceiro valor na string:

era valor3 = queryString. searchParams . obter ( 'clique' ) ;
console. registro ( 'valor do clique: ' + valor3 ) ;

Pode-se ver que os valores da string de consulta foram recuperados com sucesso:

Método 2: obter valores de string de consulta usando URLSearchParams com o método get()

O ' URLSearchParams ” pode ser usada em JavaScript para recuperar os valores da string de consulta. Ele avalia a string de consulta de uma URL e oferece um meio para acessar os valores. Observe que você deve enviar apenas a parte da string de consulta do URL, que pode ser recuperada utilizando o botão “ janela.local.pesquisa ” como um parâmetro para URLSearchParams().

Exemplo
Crie uma variável que armazene a string de consulta:

era urlQueryString = 'keyword=SearchText &fullname=jennyConvey &click=Enviar' ;

Passe a corda para o “ URLSearchParams ”interface:

era queryString = novo URLSearchParams ( urlQueryString ) ;

Obter o valor da chave “ nome completo ” da string de consulta usando o “ obter() ” método:

era valor1 = queryString. obter ( 'nome completo' ) ;
console. registro ( 'valor do nome completo: ' + valor1 ) ;

Saída

Observação : Usar ' const queryString = new URLSearchParams(window.location.search) ” para obter o URL ativo/atual.

Depois de obter a URL atual, obtenha a string de consulta dela, crie uma instância de URLSearchParams e passe a string de consulta para ela. Por fim, obtenha o valor de um parâmetro específico na string de consulta usando o método get().

Método 2: obter valores de string de consulta usando URLSearchParams com o método values()

Você também pode usar o “ valores() ” com a interface URLSearchParams para recuperar os valores da string de consulta. Isso ajuda a acessar todos os valores da string de uma só vez.

Exemplo
Passe a string de consulta para a interface URLSearchParams e armazene-a em uma variável “ queryString ”:

era queryString = novo URLSearchParams ( urlQueryString ) ;

Chame o método values() no “ para ” loop para obter todos os valores da string de consulta:

para ( const valor de queryString . valores ( ) ) {
console. registro ( valor ) ;
}

Pode-se observar que todos os valores de string foram buscados:

Isso é tudo sobre como obter os valores da string de consulta em JavaScript.

Conclusão

Para obter os valores da string de consulta, use o comando “ URL API ' com o ' obter() ” método e “ searchParam ” atributo. A propriedade searchParams do objeto URL em JavaScript representa a string de consulta de uma URL. Você também pode usar o “ URLSearchParams ” interface com o “ obter() ” método ou “ valores() ” método. Este blog descreveu o procedimento para obter os valores da string de consulta em JavaScript.

Como obter valores de string de consulta em JavaScript