Como obter a URL atual via JavaScript: análise sob o capô

Como obter a URL atual via JavaScript: entendendo o que está escondido sob o capô

Imagine: você está sentado em frente ao computador, abriu o navegador, e na barra de endereços há um link longo. Você quer que seu script em JavaScript "leia" esse link, o divida em partes e faça algo útil com elas. Situação familiar? Com certeza! Esta é uma das perguntas mais populares no Stack Overflow — "Get the current URL with JavaScript?" tem centenas de milhares de visualizações. Por quê? Porque nenhum projeto sério fica sem essa tarefa: navegação dinâmica, análise, formulários, requisições AJAX — em todos os lugares precisamos saber onde estamos.

Neste artigo, não vou apenas mostrar a linha mágica window.location.href, mas vou olhar sob o capô do navegador. Você aprenderá como o objeto location é estruturado, quais propriedades ele armazena, como fazer parsing de URL com segurança e quais armadilhas o aguardam. Vamos lá!

Conheça o objeto window.location

Toda vez que você abre uma página web, o navegador cria um objeto especial — window.location. Ele vive no espaço de nomes global e contém todas as informações sobre a URL atual. Basta escrever no console:

console.log(window.location);

Você verá um objeto com várias propriedades. As mais populares são:

\n
• href — a string completa da URL (por exemplo, https://pythonlib.ru/blog?page=2#comments).
\n
• protocol — o protocolo (https: ou http:).
\n
• hostname — o nome do host (pythonlib.ru).
\n
• port — a porta (se não especificada, é uma string vazia).
\n
• pathname — o caminho para o arquivo ou página (/blog).
\n
• search — a string de consulta (tudo após ?, por exemplo ?page=2).
\n
• hash — o fragmento do link (tudo após #, por exemplo #comments).
\n

O navegador atualiza automaticamente essas propriedades ao navegar por um link ou alterar a barra de endereços. Você não pode simplesmente sobrescrevê-las (bem, quase — falaremos sobre isso depois), mas pode lê-las à vontade.

Como obter a URL completa: a maneira mais simples

Se você precisa da string inteira, use a propriedade href:

const currentUrl = window.location.href;\nconsole.log(currentUrl);\n// Saída: "https://pythonlib.ru/blog?page=2#comments"

Este é o "padrão ouro". Funciona em todos os navegadores, incluindo Internet Explorer (sim, ele ainda está vivo em algumas redes corporativas). Lembre-se disso como a resposta universal para "como obter a URL atual em JavaScript".

Dividindo a URL em partes: por que isso é necessário?

Suponha que você está criando uma loja online. Você precisa entender quais parâmetros foram passados na string de consulta: ?category=books&sort=price. Ou você quer rolar suavemente a página até um elemento com a âncora #reviews. Simplesmente pegar o href não é suficiente. É preciso dividi-lo em componentes.

A maneira mais confiável em JavaScript moderno é usar o construtor URL:

const url = new URL(window.location.href);\nconsole.log(url.searchParams.get('category')); // "books"\nconsole.log(url.hash); // "#reviews"

O objeto URL fornece acesso ao método conveniente searchParams — este é um verdadeiro parser de string de consulta. Você pode obter, adicionar e remover parâmetros sem precisar dividir a string manualmente. Sob o capô, ele usa as mesmas propriedades de window.location, mas oferece uma API mais limpa.

Sob o capô: como o navegador processa a URL

Quando você digita um endereço na barra do navegador, ocorre toda uma cadeia de eventos. O navegador divide a string em componentes usando o algoritmo descrito na especificação WHATWG URL Standard. Parece algo assim