Como pegar a última parte da URL com JavaScript

Neste artigo você vai aprender a como pegar a última parte da URL com JavaScript, vamos utilizar uma abordagem simples!

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

Para pegar a última parte da URL com JavaScript, você pode usar o objeto window.location para obter a URL atual e, em seguida, usar a propriedade pathname para obter a parte da URL após o domínio.

Em seguida, você pode usar o método split() para dividir a string da URL em um array baseado em um separador específico, como “/”, e, finalmente, usar o método pop() para obter o último elemento do array, que representa a última parte da URL.

Aqui está um exemplo de como fazer isso:

let url = window.location.pathname;
let parts = url.split('/');
let lastPart = parts.pop() || parts.pop();
console.log(lastPart);

No exemplo acima, a variável url é inicializada com o valor da propriedade pathname do objeto window.location, que representa a parte da URL após o domínio.

Em seguida, a variável parts é inicializada com o resultado da chamada do método split('/') na variável url, que divide a string da URL em um array baseado no separador “/”.

Finalmente, a variável lastPart é inicializada com o resultado da chamada do método pop() na variável parts, que retorna o último elemento do array.

É importante notar que o código acima assume que o separador é “/” e que o caminho da URL é sempre relativo, se não for o caso, é necessário ajustar o código.

É importante lembrar que esse código não é capaz de lidar com casos onde a última parte da URL é uma barra, nesses casos é necessário adicionar uma validação adicional para garantir que o resultado seja o esperado.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Em resumo, pegar a última parte da URL com JavaScript é uma tarefa simples que pode ser realizada usando o objeto window.location para obter a URL atual, seguido pelo uso da propriedade pathname para obter a parte da URL após o domínio.

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

Em seguida, usando o método split() para dividir a string da URL em um array baseado em um separador específico, e, finalmente, usando o método pop() para obter o último elemento do array, que representa a última parte da URL.

No entanto, é importante lembrar que este código assume que o separador é “/” e que o caminho da URL é sempre relativo, se não for o caso, é necessário ajustar o código e adicionar validações adicionais para garantir que o resultado seja o esperado.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

E se a URL estiver numa string, e não na página atual?

O window.location só serve pra página que tá aberta no navegador

Mas muita gente cai aqui querendo pegar o último pedaço de uma URL que veio de um campo, de uma API ou de um array

Nesse caso o caminho é o objeto URL, que já quebra o endereço pra você em partes prontas

Se você conhece window.location, pense no URL como a mesma coisa, só que apontando pra qualquer endereço que você passar

[bloco de código] let endereco = ‘https://horadecodar.com.br/blog/javascript/pegar-ultima-parte/’ let caminho = new URL(endereco).pathname let partes = caminho.split(‘/’).filter(Boolean)

console.log(ultima)

O filter(Boolean) aí tira os pedaços vazios que sobram das barras

O resto é a mesma receita do começo do artigo: quebra por "/" e pega o final

Ignorando a barra do final: a tal validação adicional

Quando a URL termina em "/", o split devolve um item vazio no fim do array

Aí você pede o último elemento e recebe uma string vazia, achando que o código quebrou

A validação mais direta é limpar os vazios antes de pegar o último

[bloco de código] let partes = window.location.pathname.split(‘/’).filter(Boolean)

console.log(ultima)

Tome cuidado com um detalhe: filter(Boolean) descarta qualquer pedaço vazio, não só o do final

Pra URL de página isso é ótimo, porque barra duplicada também some do caminho

E quando a URL tem query string ou hash?

O pathname já vem limpo, sem "?" e sem "#"

Porém, se você partir da URL inteira em texto, o split leva tudo junto e o último pedaço vira uma bagunça tipo pagina?utm=newsletter

De novo o objeto URL resolve, porque ele separa cada parte do endereço em uma propriedade

[bloco de código] let endereco = ‘https://horadecodar.com.br/blog/meu-post?utm=newsletter#comentarios’ let dados = new URL(endereco)

console.log(dados.pathname) console.log(dados.search) console.log(dados.hash)

Um detalhe pra guardar: o hash não vai pro servidor, ele é coisa de navegador

Então se o seu objetivo é identificar a página, trabalhe sempre em cima do pathname

Erros comuns na hora de pegar a última parte da URL

Esses são os tropeços que mais aparecem, se liga:

Usar pop() e esquecer que ele MUDA o array original, ou seja, depois de chamar pop() o array perdeu aquele item pra sempre

Esperar a URL completa dentro do pathname, quando ele só devolve o que vem depois do domínio

Achar que o último pedaço é sempre o slug: em endereço com paginação ou com barra no fim, o último item pode ser outra coisa

Rodar o código antes da página existir de fato, em ambiente que não tem window, e tomar erro na cara

Se o resultado vier vazio ou estranho, joga um console.log(partes) antes de pegar o último elemento

Ver o array inteiro resolve quase todo caso misterioso 🙂

Onde isso é usado no dia a dia

Só pra sair da teoria, alguns usos reais:

Pegar o slug do post pra pedir o conteúdo certo pra uma API

Pegar o id de um recurso, tipo /produtos/482, e carregar aquele item

Descobrir o nome do arquivo em um link de download

Marcar como ativo o item do menu que bate com a página atual

É sempre a mesma receita: quebra o caminho por "/", limpa os vazios e olha pro final

Bora testar na sua própria página? Abre o console e roda o código, o resultado sai na hora

Perguntas frequentes

Como pegar o último segmento sem a barra do final? Quebre o caminho com split(‘/’), passe um filter(Boolean) pra tirar os pedaços vazios e pegue o último item do array que sobrou

Como pegar a última parte de uma URL que está numa string? Monte um objeto URL com essa string, leia o pathname dele e aplique o mesmo split(‘/’)

O pathname traz a query string junto? Não, o pathname é só o caminho, o que vem depois do "?" fica separado em outra propriedade

Qual a diferença entre split(‘/’).pop() e usar o objeto URL? O split é mais curto e resolve o caso simples, o objeto URL entende o endereço de verdade e separa domínio, caminho, query e hash pra você

Como pegar só o nome do arquivo, tipo imagem.png? Mesma ideia: o nome do arquivo é o último pedaço do caminho, então split(‘/’) e pega o final

E em página que troca de rota sem recarregar? O valor precisa ser lido de novo no momento em que a rota muda, senão você continua com o segmento antigo em mãos

Quando usar split() e quando usar o objeto URL

Regra prática, sem mistério:

Se você já tem o pathname na mão e o caminho é simples, split(‘/’) com filter(Boolean) resolve e acabou

Se o endereço vem de fora, com domínio, query string, hash ou coisa codificada no meio, use o objeto URL e leia o pathname dele

O segundo caminho é mais verboso, porém você para de escrever gambiarra pra cada formato de endereço novo que aparece

E se a URL estiver numa string, e não na página atual?

O window.location só serve pra página que tá aberta no navegador

Mas muita gente cai aqui querendo pegar o último pedaço de uma URL que veio de um campo, de uma API ou de um array

Nesse caso o caminho é o objeto URL, que já quebra o endereço pra você em partes prontas

Se você conhece window.location, pense no URL como a mesma coisa, só que apontando pra qualquer endereço que você passar

[bloco de código] let endereco = ‘https://horadecodar.com.br/blog/javascript/pegar-ultima-parte/’ let caminho = new URL(endereco).pathname let partes = caminho.split(‘/’).filter(Boolean)

console.log(ultima)

O filter(Boolean) aí tira os pedaços vazios que sobram das barras

O resto é a mesma receita do começo do artigo: quebra por "/" e pega o final

Ignorando a barra do final: a tal validação adicional

Quando a URL termina em "/", o split devolve um item vazio no fim do array

Aí você pede o último elemento e recebe uma string vazia, achando que o código quebrou

A validação mais direta é limpar os vazios antes de pegar o último

[bloco de código] let partes = window.location.pathname.split(‘/’).filter(Boolean)

console.log(ultima)

Tome cuidado com um detalhe: filter(Boolean) descarta qualquer pedaço vazio, não só o do final

Pra URL de página isso é ótimo, porque barra duplicada também some do caminho

E quando a URL tem query string ou hash?

O pathname já vem limpo, sem "?" e sem "#"

Porém, se você partir da URL inteira em texto, o split leva tudo junto e o último pedaço vira uma bagunça tipo pagina?utm=newsletter

De novo o objeto URL resolve, porque ele separa cada parte do endereço em uma propriedade

[bloco de código] let endereco = ‘https://horadecodar.com.br/blog/meu-post?utm=newsletter#comentarios’ let dados = new URL(endereco)

console.log(dados.pathname) console.log(dados.search) console.log(dados.hash)

Um detalhe pra guardar: o hash não vai pro servidor, ele é coisa de navegador

Então se o seu objetivo é identificar a página, trabalhe sempre em cima do pathname

Erros comuns na hora de pegar a última parte da URL

Esses são os tropeços que mais aparecem, se liga:

Usar pop() e esquecer que ele MUDA o array original, ou seja, depois de chamar pop() o array perdeu aquele item pra sempre

Esperar a URL completa dentro do pathname, quando ele só devolve o que vem depois do domínio

Achar que o último pedaço é sempre o slug: em endereço com paginação ou com barra no fim, o último item pode ser outra coisa

Rodar o código antes da página existir de fato, em ambiente que não tem window, e tomar erro na cara

Se o resultado vier vazio ou estranho, joga um console.log(partes) antes de pegar o último elemento

Ver o array inteiro resolve quase todo caso misterioso 🙂

Onde isso é usado no dia a dia

Só pra sair da teoria, alguns usos reais:

Pegar o slug do post pra pedir o conteúdo certo pra uma API

Pegar o id de um recurso, tipo /produtos/482, e carregar aquele item

Descobrir o nome do arquivo em um link de download

Marcar como ativo o item do menu que bate com a página atual

É sempre a mesma receita: quebra o caminho por "/", limpa os vazios e olha pro final

Bora testar na sua própria página? Abre o console e roda o código, o resultado sai na hora

Perguntas frequentes

Como pegar o último segmento sem a barra do final? Quebre o caminho com split(‘/’), passe um filter(Boolean) pra tirar os pedaços vazios e pegue o último item do array que sobrou

Como pegar a última parte de uma URL que está numa string? Monte um objeto URL com essa string, leia o pathname dele e aplique o mesmo split(‘/’)

O pathname traz a query string junto? Não, o pathname é só o caminho, o que vem depois do "?" fica separado em outra propriedade

Qual a diferença entre split(‘/’).pop() e usar o objeto URL? O split é mais curto e resolve o caso simples, o objeto URL entende o endereço de verdade e separa domínio, caminho, query e hash pra você

Como pegar só o nome do arquivo, tipo imagem.png? Mesma ideia: o nome do arquivo é o último pedaço do caminho, então split(‘/’) e pega o final

E em página que troca de rota sem recarregar? O valor precisa ser lido de novo no momento em que a rota muda, senão você continua com o segmento antigo em mãos

Quando usar split() e quando usar o objeto URL

Regra prática, sem mistério:

Se você já tem o pathname na mão e o caminho é simples, split(‘/’) com filter(Boolean) resolve e acabou

Se o endereço vem de fora, com domínio, query string, hash ou coisa codificada no meio, use o objeto URL e leia o pathname dele

O segundo caminho é mais verboso, porém você para de escrever gambiarra pra cada formato de endereço novo que aparece