Como pegar o hostname e path de uma URL com JavaScript

Neste artigo você vai aprender a como obter o hostname e path de uma URL com JavaScript, através de uma simples abordagem!

Fala programador(a), beleza? Bora aprender mais sobre como trabalhar com URLs em JavaScript!

Para obter todas as informações de uma URL vamos precisar tê-la como string

Depois será necessário instanciar um novo objeto da classe URL de JavaScript

Nela teremos tudo que precisamos, serão retornadas propriedades com os valores que buscamos com este artigo

Veja um exemplo prático:

const myUrl = new URL("https://www.google.com/test?q=matheus")

const hostname = myUrl.hostname
const path = myUrl.pathname
const search = myUrl.search

console.log(hostname) // "www.google.com"
console.log(path) // /test
console.log(search) // ?q=matheus

Aqui neste caso temos a URL do Google, onde obtemos as informações como:

• Hostname;
• Path;
• Query String;

O objeto retornado é composto por muitas outras propriedades, sugiro consultar as outras nesta página

Assim você ficará a par de todo o poder da classe URL

Conclusão

Neste artigo você viu como resgatar o hostname e path de uma URL com JavaScript

Basicamente precisamos instanciar um novo objeto da classe URL com a URL como argumento

Esta objeto nos fornece diversas informações da URL informada

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!