Como ler parâmetros da url com JavaScript

Hoje vamos aprender a resolver um problema comum em aplicações front-end e também em aplicativos híbridos 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

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://www.blogson.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>

O resultado serão estes:

Exemplo para download

Para ver este código em ação, clique aqui: index.html

Bons estudos!