Como pegar a URL sem nenhum parâmetro com JavaScript

Neste artigo você vai aprender a como pegar a URL sem nenhum parâmetro, utilizando uma simples abordagem de JavaScript

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

No desenvolvimento de aplicações web, é comum precisar trabalhar com URLs e manipulá-las para atender a diferentes requisitos.

Uma tarefa comum é extrair a URL base de um endereço web, removendo todos os parâmetros e fragmentos de URL.

Neste artigo, vamos aprender como pegar a URL sem nenhum parâmetro usando JavaScript.

Entendendo os componentes da URL

Uma URL típica é composta por várias partes, como o protocolo, domínio, caminho, parâmetros e fragmento.

Por exemplo:

https://example.com/path?parameter1=value1&parameter2=value2#fragment

Ao pegar a URL sem nenhum parâmetro, queremos remover a parte da URL que começa com o caractere ? e inclui todos os pares de parâmetros e valores.

No exemplo acima, a URL base sem parâmetros seria:

https://example.com/path

Como pegar a URL sem nenhum parâmetro usando JavaScript

Vamos explorar várias maneiras de obter a URL sem nenhum parâmetro usando JavaScript:

Método 1: Usando a interface URL

A interface URL do JavaScript fornece uma maneira fácil de trabalhar com URLs e acessar seus componentes individuais.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Para pegar a URL sem nenhum parâmetro usando a interface URL, siga os passos abaixo:

const url = new URL('https://example.com/path?parameter1=value1&parameter2=value2#fragment');
const baseUrl = url.origin + url.pathname;
console.log(baseUrl); // "https://example.com/path"

Neste exemplo, criamos uma nova instância da interface URL passando a URL completa como argumento.

Em seguida, concatenamos a propriedade origin e pathname para obter a URL base sem parâmetros.

Método 2: Usando window.location

Se você estiver trabalhando com a URL da página atual em um navegador, poderá usar o objeto window.location para acessar os componentes da URL:

const baseUrl = window.location.origin + window.location.pathname;
console.log(baseUrl); // A URL base da página atual sem parâmetros

Neste exemplo, usamos as propriedades origin e pathname do objeto window.location para construir a URL base sem parâmetros.

Método 3: Usando expressões regulares

Outra abordagem para pegar a URL sem nenhum parâmetro é usar expressões regulares para remover a parte da URL que contém os parâmetros:

const fullUrl = 'https://example.com/path?parameter1=value1&parameter2=value2#fragment';
const baseUrl = fullUrl.replace(/\?.*$/, '');
console.log(baseUrl); // "https://example.com/path"

Neste exemplo, usamos o método replace() com uma expressão regular para remover a parte da URL que começa com o caractere ? e inclui todos os caracteres subsequentes.

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

Conclusão

Saber como pegar a URL sem nenhum parâmetro é uma habilidade útil no desenvolvimento de aplicações web.

Neste artigo, exploramos três métodos diferentes para alcançar isso usando JavaScript: a interface URL, o objeto window.location e expressões regulares.

Ao dominar essas técnicas, você estará mais bem preparado para manipular e trabalhar com URLs em suas aplicações web.

É importante lembrar que cada método tem seus próprios casos de uso e limitações.

A interface URL e o objeto window.location são soluções mais simples e diretas para trabalhar com URLs, enquanto expressões regulares oferecem maior flexibilidade, mas também podem ser mais complexas e propensas a erros.

Ao escolher o método mais adequado para o seu caso, considere as necessidades específicas do seu projeto e a compatibilidade com diferentes navegadores.

A interface URL e o objeto window.location são amplamente suportados pelos navegadores modernos, mas podem não ser compatíveis com versões mais antigas do Internet Explorer.

Por outro lado, o uso de expressões regulares geralmente é compatível com uma ampla gama de navegadores, mas requer um entendimento mais profundo de regex para garantir que a solução seja precisa e confiável.

Com a compreensão desses métodos e a prática de suas aplicações, você será capaz de pegar a URL sem nenhum parâmetro e manipular URLs de forma eficiente em seus projetos JavaScript.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Por que remover os parâmetros da URL?

Antes do como, o porquê

Parâmetro é ótimo pra carregar informação (filtro, busca, campanha, sessão), só que ele atrapalha quando o que você quer é a página em si

Os casos onde isso aparece mais:

• comparar duas URLs e saber se apontam pra mesma página, mesmo que uma tenha vindo com filtro e a outra não
• montar link de compartilhamento limpo, sem levar junto o rastro de quem clicou antes
• agrupar acesso no seu log ou painel, pra não contar a mesma página como se fossem várias
• gerar um link canônico ou uma chave de cache, onde a base tem que ser sempre igual

Se você já mexeu com cache, é a mesma ideia: a chave precisa ser estável, senão cada variação vira um item novo

Sacou? Então bora pros métodos 😀

E o fragmento (#)? Ele some junto?

Boa pergunta, e a resposta muda de método pra método

Nos métodos 1 e 2 você monta a URL do zero com origin + pathname, então nem o ? nem o # entram na conta, sempre sobra só a base

Já o método 3 é um recorte de texto: ele apaga do primeiro ? até o fim da string. Se o # vier depois do ?, ele sai junto…

mas se a URL tiver # e NÃO tiver ?, não existe ponto de corte e a string volta inteirinha

const semParametro = 'https://example.com/path#fragment';
console.log(semParametro.replace(/\?.*$/, '')); // "https://example.com/path#fragment"

Tome cuidado com isso! Já vi gente perder tempo caçando bug que era só essa diferença

Se o seu objetivo é sempre chegar na URL base limpa, o método 1 é o mais previsível dos três

Qual método escolher em cada caso?

Resumo rápido pra você não travar na hora de decidir:

• a URL está em uma string (veio de um input, de uma API, do banco): interface URL, método 1
• você quer a URL da página que está aberta no navegador: window.location, método 2
• você só precisa cortar tudo que vem depois do ?, sem criar objeto nenhum: expressão regular, método 3

Na dúvida entre os três, vai de interface URL

Ela lê a URL por partes e você pede exatamente a parte que quer, em vez de confiar em um recorte de texto

O método 3 continua útil, só exige que você saiba o formato da URL que vai receber

Perguntas frequentes

Como pegar só o domínio, sem o caminho?

Use só o origin, sem concatenar o pathname

const url = new URL('https://example.com/path?parameter1=value1');
console.log(url.origin); // "https://example.com"

E como pegar só o caminho da página?

Aí é o contrário, fica só o pathname

const url = new URL('https://example.com/path?parameter1=value1');
console.log(url.pathname); // "/path"

Funciona se a URL não tiver parâmetro nenhum?

Funciona

Nos métodos 1 e 2 você monta a base a partir das partes, então o resultado é o mesmo com ou sem parâmetro

No método 3 não existe ? pra cortar, e o replace devolve a string do jeito que entrou

E se o código não estiver rodando em uma página aberta?

O window.location é a URL da página atual no navegador, ele depende de ter uma página na frente

Já os métodos 1 e 3 recebem a URL como texto e trabalham em cima dela, então servem mesmo quando não existe página aberta envolvida