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!

Qual a diferença entre hostname e host?

Essa é a dúvida que mais pega gente desprevenida

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

O hostname devolve só o domínio, limpo

O host devolve o domínio junto com a porta, quando ela existe na URL

Ou seja: em uma URL comum, os dois parecem iguais, e você jura que tanto faz

Aí você roda o mesmo código em um ambiente local, com porta, e os valores mudam 🙂

Se o que você quer é comparar domínio (checar se o link é interno, por exemplo), use hostname

Se você precisa remontar o endereço do jeitinho que ele veio, use host

Todas as partes de uma URL em um exemplo só:

O post te mostrou três propriedades, mas o objeto entrega a URL inteira fatiada

Em vez de te mandar ler documentação, se liga no exemplo completo:

const url = new URL("https://horadecodar.com.br:8080/blog/artigo?tema=javascript#comentarios")

console.log(url.protocol) // "https:" console.log(url.host) // "horadecodar.com.br:8080" console.log(url.hostname) // "horadecodar.com.br" console.log(url.port) // "8080" console.log(url.pathname) // "/blog/artigo" console.log(url.search) // "?tema=javascript" console.log(url.hash) // "#comentarios" console.log(url.origin) // "https://horadecodar.com.br:8080"

Repara em dois detalhes que costumam gerar bug bobo

O protocol vem COM os dois pontos no fim

E o hash vem com a cerquilha na frente

Se você for concatenar isso em algum lugar, já sabe o que esperar 😀

Como pegar o valor de um parâmetro da URL:

O search te devolve a query string crua, inteirinha

Só que na prática você quase nunca quer a string toda, você quer UM valor

E aqui mora a parte massa do objeto URL: ele já vem com o searchParams pronto

const url = new URL("https://horadecodar.com.br/busca?tema=javascript&page=2")

console.log(url.searchParams.get("tema")) // "javascript" console.log(url.searchParams.get("page")) // "2" console.log(url.searchParams.has("tema")) // true console.log(url.searchParams.get("autor")) // null

Duas coisas pra guardar

O valor sempre volta como string, então aquele "2" ali não é número, converta antes de fazer conta

E parâmetro que não existe volta null, não volta undefined, o que muda a sua verificação

E se eu só tiver um caminho relativo?

Questão clássica: você raspou um link de um HTML e veio só "/sobre"

Joga isso direto no construtor e não vai rolar, porque não é uma URL completa

O truque é o segundo argumento, que serve de base:

const url = new URL("/sobre", "https://horadecodar.com.br/blog/")

console.log(url.href) // "https://horadecodar.com.br/sobre" console.log(url.hostname) // "horadecodar.com.br"

É como montar um endereço a partir do CEP do bairro: você diz de onde está saindo e o resto ele resolve

Muito útil quando você trata vários links de uma página de uma vez

Como pegar o hostname e o path da página atual:

Até aqui a gente trabalhou com URL em string

Mas e quando a URL que você quer é a da própria página que está aberta?

No navegador dá pra ir direto:

console.log(window.location.hostname) console.log(window.location.pathname)

E se você quiser tratar a página atual com as mesmas ferramentas do artigo (searchParams e companhia), é só instanciar a partir dela:

const url = new URL(window.location.href)

console.log(url.hostname) console.log(url.searchParams.get("utm_source"))

Ou seja, você não precisa escolher um lado, o location te dá a string e o objeto URL te dá o bisturi

Tome cuidado: URL inválida não devolve null

Esse aqui já me pouparia um tempo se alguém tivesse me avisado antes

Se a string não for uma URL válida, o construtor não devolve null nem string vazia, ele estoura erro e derruba o resto do seu código

O caso mais comum: string sem o protocolo

try { const url = new URL("horadecodar.com.br") console.log(url.hostname) } catch (erro) { console.log("URL inválida") }

Então, sempre que a URL vier de fora (input do usuário, planilha, resposta de API), trate ela dentro de um try catch

De fora você não controla o que vem, e é justo aí que quebra

Por que largar o split, a regex e a tag <a>:

Esse post é antigo e vale um recado pra quem chega aqui hoje

Se você pesquisar esse mesmo problema por aí, ainda vai esbarrar em três receitas de bastidor: quebrar a string no split, montar uma regex gigante ou criar um elemento de link escondido só pra ler o hostname dele

E se aparecer uma regex monstruosa na sua frente, vinda de um tutorial velho ou de um assistente de IA com pressa, desconfia 😛

O problema dessas gambiarras não é elegância, é que elas quebram no caso torto: porta, subdomínio, hash junto de query, caminho vazio, acento

O objeto URL já entende essas regras pra você

Menos código seu pra manter, menos caso torto pra descobrir em produção

Qual a diferença entre hostname e host?

Essa é a dúvida que mais pega gente desprevenida

O hostname devolve só o domínio, limpo

O host devolve o domínio junto com a porta, quando ela existe na URL

Ou seja: em uma URL comum, os dois parecem iguais, e você jura que tanto faz

Aí você roda o mesmo código em um ambiente local, com porta, e os valores mudam 🙂

Se o que você quer é comparar domínio (checar se o link é interno, por exemplo), use hostname

Se você precisa remontar o endereço do jeitinho que ele veio, use host

Todas as partes de uma URL em um exemplo só:

O post te mostrou três propriedades, mas o objeto entrega a URL inteira fatiada

Em vez de te mandar ler documentação, se liga no exemplo completo:

const url = new URL("https://horadecodar.com.br:8080/blog/artigo?tema=javascript#comentarios")

console.log(url.protocol) // "https:" console.log(url.host) // "horadecodar.com.br:8080" console.log(url.hostname) // "horadecodar.com.br" console.log(url.port) // "8080" console.log(url.pathname) // "/blog/artigo" console.log(url.search) // "?tema=javascript" console.log(url.hash) // "#comentarios" console.log(url.origin) // "https://horadecodar.com.br:8080"

Repara em dois detalhes que costumam gerar bug bobo

O protocol vem COM os dois pontos no fim

E o hash vem com a cerquilha na frente

Se você for concatenar isso em algum lugar, já sabe o que esperar 😀

Como pegar o valor de um parâmetro da URL:

O search te devolve a query string crua, inteirinha

Só que na prática você quase nunca quer a string toda, você quer UM valor

E aqui mora a parte massa do objeto URL: ele já vem com o searchParams pronto

const url = new URL("https://horadecodar.com.br/busca?tema=javascript&page=2")

console.log(url.searchParams.get("tema")) // "javascript" console.log(url.searchParams.get("page")) // "2" console.log(url.searchParams.has("tema")) // true console.log(url.searchParams.get("autor")) // null

Duas coisas pra guardar

O valor sempre volta como string, então aquele "2" ali não é número, converta antes de fazer conta

E parâmetro que não existe volta null, não volta undefined, o que muda a sua verificação

E se eu só tiver um caminho relativo?

Questão clássica: você raspou um link de um HTML e veio só "/sobre"

Joga isso direto no construtor e não vai rolar, porque não é uma URL completa

O truque é o segundo argumento, que serve de base:

const url = new URL("/sobre", "https://horadecodar.com.br/blog/")

console.log(url.href) // "https://horadecodar.com.br/sobre" console.log(url.hostname) // "horadecodar.com.br"

É como montar um endereço a partir do CEP do bairro: você diz de onde está saindo e o resto ele resolve

Muito útil quando você trata vários links de uma página de uma vez

Como pegar o hostname e o path da página atual:

Até aqui a gente trabalhou com URL em string

Mas e quando a URL que você quer é a da própria página que está aberta?

No navegador dá pra ir direto:

console.log(window.location.hostname) console.log(window.location.pathname)

E se você quiser tratar a página atual com as mesmas ferramentas do artigo (searchParams e companhia), é só instanciar a partir dela:

const url = new URL(window.location.href)

console.log(url.hostname) console.log(url.searchParams.get("utm_source"))

Ou seja, você não precisa escolher um lado, o location te dá a string e o objeto URL te dá o bisturi

Tome cuidado: URL inválida não devolve null

Esse aqui já me pouparia um tempo se alguém tivesse me avisado antes

Se a string não for uma URL válida, o construtor não devolve null nem string vazia, ele estoura erro e derruba o resto do seu código

O caso mais comum: string sem o protocolo

try { const url = new URL("horadecodar.com.br") console.log(url.hostname) } catch (erro) { console.log("URL inválida") }

Então, sempre que a URL vier de fora (input do usuário, planilha, resposta de API), trate ela dentro de um try catch

De fora você não controla o que vem, e é justo aí que quebra

Por que largar o split, a regex e a tag <a>:

Esse post é antigo e vale um recado pra quem chega aqui hoje

Se você pesquisar esse mesmo problema por aí, ainda vai esbarrar em três receitas de bastidor: quebrar a string no split, montar uma regex gigante ou criar um elemento de link escondido só pra ler o hostname dele

E se aparecer uma regex monstruosa na sua frente, vinda de um tutorial velho ou de um assistente de IA com pressa, desconfia 😛

O problema dessas gambiarras não é elegância, é que elas quebram no caso torto: porta, subdomínio, hash junto de query, caminho vazio, acento

O objeto URL já entende essas regras pra você

Menos código seu pra manter, menos caso torto pra descobrir em produção