Como ler variável da url com JavaScript

Hoje vamos aprender a resolver um problema comum em aplicações front-end e também em aplicativos híbridas quando precisamos ler parâmetros de uma página para outra sem utilizar linguagens de back-end, como PHP por exemplo.

Conhecendo as funções JS

Funções são blocos de construção fundamentais em JavaScript. Uma função é um procedimento de JavaScript – um conjunto de instruções que executa uma tarefa ou calcula um valor. Para usar uma função, você deve defini-la em algum lugar no escopo do qual você quiser chamá-la.

Capturar o endereço da url com JavaScript

Para capturar o endereço da url usamos a função window.location.href
do JS. Esta função retorna o caminha completo da url, incluindo o http:// e todos os parâmetros inclusos na url.

Encontrar caracteres em uma string com JavaScript

Depois de descobrirmos o endereço da url, vamos varrer o endereço em busca dos caracteres ? e & para que então possamos descobrir quais são os parâmetros. Para isso usamos a função split().

Código completo

No código a seguir usamos as duas funções citadas acima. O código a seguir consegue varrer até 4 parâmetros passados na url. Você poderá ajudar o código para a quantidade de parametros que desejar ler.

Coloque até 3 parametros na url e pressione a tecla Enter.<br /><br />
<hr />

<div id="resultado"></div>

<script>    
window.onload = CapturaParametrosUrl();
    
/* 
	Captura parâmetros de URL com JS 
	Créditos: https://comodesenvolver.com.br
*/

function CapturaParametrosUrl() {

    //captura a url da página
    var url = window.location.href; 
    alert("URL CAPTURADA: \n\n" + url);
	
	//tenta localizar o ?
    var res = url.split('?'); 
    	
	if (res[1] === undefined) {
        alert('página sem parâmetros.');
    }
	
    if (res[1] !== undefined) {
		//tenta localizar os & (pode haver mais de 1)
        var parametros = res[1].split('&');
        alert('Parametros encontrados:\n' + parametros);
		
		//qtd. de parâmetros que serão tratados pelo laço.
		var qtdParametrosParaLer = 5; 
		
		//guarda o nome dos parâmetros e os valores e, vetores.
		var parametroEncontrado = new Array(); 
		var valorParametro = new Array();
		
		for (var cont = 0; cont<=qtdParametrosParaLer; cont++)
		{
			if (parametros[cont] !== undefined) 
			{
				captura = parametros[cont].split('=');				
				
				parametroEncontrado[cont] = captura[0];
				valorParametro[cont] = captura[1];
				
				document.getElementById('resultado').innerHTML += parametroEncontrado[cont] + '=' + valorParametro[cont] + '<br/>';
			}
		}
    }
}
</script>

Outro Exemplo de Código

Neste exemplo suponhamos a seguinte situação, o navegador está recebendo a URL com uma variável no final, e queremos pegar só a informação que contenha a nessa variável “https://seudominio.com/?var1=MeusDados” queremos pegar o texto “MeusDados” e imprimirmos em um link href como um incremento de um botão em nossa página.

<a class="wp-block-button__link" href="https://seudominio.com/?var1=Sim">MEU BOTÃO</a>

<script>    
window.onload = CapturaParametrosUrl();
    
/* 
	Captura parâmetros de URL com JS 
	Créditos: https://comodesenvolver.com.br
*/

function CapturaParametrosUrl() {

    //captura a url da página
    var url = window.location.href;
	
	//tenta localizar o ?
    var res = url.split('?'); 
	
    if (res[1] !== undefined) {
		//tenta localizar os & (pode haver mais de 1)
        var parametros = res[1].split('&');
		
		//qtd. de parâmetros que serão tratados pelo laço.
		var qtdParametrosParaLer = 5; 
		
		//guarda o nome dos parâmetros e os valores e, vetores.
		var parametroEncontrado = new Array(); 
		var valorParametro = new Array();
		
		for (var cont = 0; cont<=qtdParametrosParaLer; cont++)
		{
			if (parametros[cont] !== undefined) 
			{
				captura = parametros[cont].split('=');				
				
				parametroEncontrado[cont] = captura[0];
				valorParametro[cont] = captura[1];

				document.querySelector(".wp-block-button__link").href += '%20' + valorParametro[cont];

			}
		}
    }
}
</script>