Como verificar se a URL tem uma string específica em JavaScript

Neste artigo você vai aprender a como verificar se a URL tem uma string em JavaScript, com apenas uma linha de código!

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

Em JS temos um objeto chamado window que basicamente tem todas as informações do projeto atual que está rodando, até mesmo as variáveis iniciadas

Nele também teremos acesso a location, que possui a propriedade href

Isso nos dará a URL atual, agora basta utilizar um método como indexOf e procurar por uma string específica

Veja um exemplo prático:

if (window.location.href.indexOf("horadecodar") !== -1) {
	console.log("Encontrou!")
}

Neste caso estamos procurando pela string horadecodar, você deve mudar para o texto que está querendo verificar na URL

Se a resposta de indexOf for 0 ou qualquer outro número maior, temos a string na URL

Isso porque este método nos dá o índice inicial da string que estamos procurando

E então -1 seria quando não foi possível encontrar este tal índice, ou seja, é a resposta negativa

Formação Recomendada

Formação Claude Code

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

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Conclusão

No artigo de hoje você viu como verificar se a URL tem uma string em JavaScript

Procuramos por uma string específica na URL, que pode ser acessada por window.location.href

O método de busca escolhido foi indexOf, mas você pode fazer isso através de uma regex também, por exemplo

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!

E o includes? Jeito mais direto:

O indexOf funciona, mas ele te devolve um número e ainda obriga tu a comparar com -1

Quando o que você quer é só um sim ou não, dá pra usar o includes, que já responde true ou false

if (window.location.href.includes("horadecodar")) {
console.log("Encontrou!")
}

Mesma ideia do exemplo anterior, só que sem a comparação com -1 no meio do caminho

Fica MUITO mais legível, principalmente dentro de um if grandão com várias condições 🙂

href, pathname, search e hash: verificando só um pedaço da URL:

Nem sempre você quer olhar a URL inteira

Se a palavra que você procura pode aparecer no domínio E na rota, o href vai dar match nos dois casos e te enganar

O location tem uma propriedade pra cada pedaço da URL:

console.log(window.location.href)     // a URL completa
console.log(window.location.hostname) // só o domínio
console.log(window.location.pathname) // só o caminho depois do domínio
console.log(window.location.search)   // só a query string, começando com ?
console.log(window.location.hash)     // só a âncora, começando com #

Aí a verificação fica cirúrgica:

if (window.location.pathname.includes("/blog")) {
console.log("Tá numa página do blog!")
}

Faça o teste no console do navegador, dá pra ver cada pedacinho na hora 😀

Como pegar um parâmetro específico da URL?

Muita gente cai aqui procurando verificar string na URL quando na real quer saber se existe um parâmetro (aquele ?id=10 lá no fim)

Dá pra fazer com includes, mas é frágil: um parâmetro chamado categoria também tem a letra a e o pedaço id espalhado no meio dele

O caminho certo é o URLSearchParams, que enxerga a query string como chave e valor:

const params = new URLSearchParams(window.location.search)

if (params.has("id")) {
console.log("O parâmetro id existe!")
}

console.log(params.get("id")) // o valor do parâmetro

Quando o parâmetro não existe, o get devolve null

Tome cuidado: has e get diferenciam maiúscula de minúscula, então id e ID são coisas diferentes pra eles

Cuidado com maiúsculas e minúsculas:

Tanto o indexOf quanto o includes comparam letra por letra, do jeitinho que você escreveu

Ou seja: Horadecodar e horadecodar não são a mesma coisa pra eles

Se você não faz ideia de como a string vai chegar na URL, normaliza os dois lados antes de comparar:

const url = window.location.href.toLowerCase()

if (url.includes("horadecodar")) {
console.log("Encontrou!")
}

É um erro clássico: o link chega com uma letra maiúscula vinda de uma campanha e o if simplesmente nunca roda, aí você fica horas achando que o problema é outro haha

E se o código rodar fora do navegador?

O window é do navegador, beleza?

Se esse mesmo trecho for executado em um ambiente que não tem window (código rodando no servidor, por exemplo), ele quebra antes mesmo de verificar qualquer coisa

Caso este erro apareça: window is not defined

A saída é checar se o window existe antes de tocar nele:

if (typeof window !== "undefined" && window.location.href.includes("horadecodar")) {
console.log("Encontrou!")
}

Simples assim, e te salva de um erro bem chato de debugar 🙂

Como verificar várias strings de uma vez?

Em vez de empilhar um if gigante cheio de ||, joga os termos em um array e usa o some:

const url = window.location.href

if (termos.some((termo) => url.includes(termo))) {
console.log("Achou pelo menos um!")
}

O some para na primeira ocorrência que der true, então nem percorre o array inteiro à toa

E a manutenção fica topzera: é só mexer no array quando surgir um termo novo 😀

E com regex, como fica?

Quando o que você procura tem variação (com ou sem www, com hífen, número no meio), o includes não dá conta

Aí entra a expressão regular com o test, que devolve true ou false igualzinho ao includes:

if (/horadecodar/i.test(window.location.href)) {
console.log("Encontrou!")
}

O i ali no fim manda ignorar maiúscula e minúscula, resolvendo de quebra aquele problema que vimos ali em cima

Se você nunca mexeu com regex, pensa nela como um molde: em vez de procurar um texto exato, você descreve o FORMATO do texto que quer achar