Como obter partes da URL da página atual com JavaScript
- Detalhes
- Angelo Luis Ferreira
- JavaScript
- Acessos: 8921
Neste tutorial vamos complementar o artigo Como obter o URL completo da página atual com JavaScript, demonstrando como obter apenas partes do URL completo da página que está sendo visualizado no navegador.
Propriedades do objeto location » (window.location)
1. O objeto "location" contém informações sobre a URL da página que está sendo visualizada no navegador.
2. Como vimos no tutorial Como obter o URL completo da página atual com JavaScript a propriedade href retorna a URL completa da página que está sendo visualizada no navegador. Entretanto, em certas ocasiões, o programador precisa obter apenas partes desta URL.
3. As propriedades protocol, host, pathname e search retornam as partes que formam a URL da página visualizada no navegador. Veja o exemplo abaixo:
<!DOCTYPE html>
<html>
<body>
<p>Clique no botão para visualizar as partes do URL da página atual:</p>
<p style="color:blue" id='url'></p>
<button onclick="minhaFunc()">Clique aqui para obter partes do URL</button>
<p id="protocolo"></p>
<p id="hostname"></p>
<p id="caminho"></p>
<p id="filtro"></p>
<script>
var url = location.href;
document.getElementById('url').innerHTML = url;
function minhaFunc() {
var x = location.protocol;
var y = location.host;
var w = location.pathname;
var z = location.search;
document.getElementById("protocolo").innerHTML = 'Protocolo (protocol) => '+x;
document.getElementById("hostname").innerHTML = 'Host (host) => '+y;
document.getElementById("caminho").innerHTML = 'Caminho (pathname) => '+w;
document.getElementById("filtro").innerHTML = 'Filtro (search) => '+z;
}
</script>
</body>
</html>
Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.
No exemplo a seguir, vamos concatenar as partes do URL formando o endereço completo da página que está sendo visualizada no navegador:
<!DOCTYPE html>
<html>
<body>
<p>Clique no botão para visualizar as partes do URL da página atual:</p>
<button onclick="minhaFunc()">Clique aqui</button>
<p id="demo"></p>
<script>
function minhaFunc() {
var x = location.protocol + '//' + location.host + location.pathname + location.search
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html> Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.
Documentação Oficial
1. [window.location.href] » Sobre a propriedade location.href.
2. [window.location.protocol] » Sobre a propriedade location.protocol.
3. [window.location.host] » Sobre a propriedade location.host.
4. [window.location.pathname] » Sobre a propriedade location.pathname.
5. [window.location.search] » Sobre a propriedade location.search.
O anúncio abaixo ajuda manter o Portal Visual Dicas
