Como remover acentos em JavaScript

Neste artigo você vai aprender a como remover acentos em JavaScript, com apenas uma linha de código, para utilizar no seu site!

Conteudo disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre expressões regulares e remoção de acentos em JavaScript!

Vamos utilizar uma expressão regular com uma gama de caracteres por meio do seu código

Com a função replace, os mesmos serão substituídos da string alvo

Veja uma representação na prática:

var texto = "Olá, está tudo bem?";

var semAcento = texto.normalize('NFD').replace(/[\u0300-\u036f]/g, "");

console.log(semAcento); // Ola, esta tudo bem?

Neste exemplo os acentos de á e de Olá e também á de está, são removidos

As letras são substituídas por suas versões sem acento, e assim resolvemos o problema de substituição de acentos com apenas uma linha

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

A função normalize retorna a Forma de Nomalização Uicode de uma string, que passamos para a função

Utilizamos como parâmetro NFD, que é Formato de Normalização Canônico de Decomposição

Por isso conseguimos eliminar os caracteres especiais com os códigos que seguem em replace na regex que inserimos nela

Se você quer saber mais sobre normalize e seus efeitos, veja este link, é da documentação do MDN

Conclusão

Neste artigo aprendemos como remover acentos em JavaScript

Utilizamos primeiramente a funçao normalize, que retorna a string em um Unicode determinado por nós

E então replace para substituir as ocorrências de acentos na string por a versão da letra sem acento

E então com uma linha conseguimos identificar os acentos e trocar na string, você pode inserir também esta sentença em uma função, reaproveitando em várias partes do seu código

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Transformando em uma função reutilizável:

Deixar essa linha solta no meio do código funciona, mas aí tu acaba copiando e colando ela em dez lugares diferentes do projeto

Melhor jogar dentro de uma função e chamar quando precisar:

function removerAcentos(texto) {
}

console.log(removerAcentos("Programação é vício"))
// Programacao e vicio

Agora é só deixar essa função no seu arquivo de utilitários e usar em qualquer parte do código

E repara que a string original não muda: strings em JavaScript são imutáveis, o normalize e o replace devolvem uma string NOVA

Ou seja, se tu não guardar o retorno em uma variável, o acento continua lá do mesmo jeito 🙂

E o ç, também é removido?

Essa dúvida aparece toda hora, então bora resolver

O ç é a letra c com uma cedilha embaixo, e o NFD separa esse sinal da letra base igualzinho faz com o acento do á

Como o replace varre justamente essa faixa de sinais, o mesmo código já dá conta, sem precisar de nada extra:

console.log(removerAcentos("Coração, ação e função"))
// Coracao, acao e funcao

Vale pra maiúscula também, e o texto continua maiúsculo, só o sinal cai fora…

console.log(removerAcentos("AÇÚCAR"))
// ACUCAR

Se tu quiser tudo minúsculo, aí é o toLowerCase que faz esse trabalho, não o normalize

Filtrando uma lista sem se preocupar com acento:

Esse é o caso de uso que mais aparece na vida real

O usuário digita "sao paulo" na busca, o seu array tem "São Paulo", o filtro não acha nada e ele acha que o site tá quebrado

A sacada é colocar os dois lados na MESMA régua antes de comparar: sem acento e em minúsculo

function normalizar(texto) {
return removerAcentos(texto).toLowerCase()
}

const busca = "belem"

const resultado = cidades.filter(function (cidade) {
return normalizar(cidade).includes(normalizar(busca))
})

Repara em um detalhe que muita gente erra: quem perde o acento é só a versão usada na COMPARAÇÃO

O texto que vai pra tela continua sendo o original, bonitinho com acento e tudo

Já me ferrei uma vez fazendo o contrário e o site inteiro ficou com nome de cidade escrito errado, haha

Gerando slug de URL sem acento:

Outro clássico: pegar o título do post e transformar em URL amigável

Aqui a remoção de acento é só o primeiro passo, depois tu troca o que sobrou por hífen:

function gerarSlug(texto) {
return removerAcentos(texto)
.toLowerCase()
.trim()
.replace(/^-+|-+$/g, "")
}

console.log(gerarSlug("Como remover acentos em JavaScript!"))
// como-remover-acentos-em-javascript

Quebrando em partes: primeiro tira o acento, depois deixa minúsculo, troca tudo que não é letra ou número por hífen e por fim limpa o hífen que sobrou nas pontas

Tome cuidado! A ORDEM aqui importa

Se tu trocar os caracteres antes de normalizar, as letras acentuadas caem fora do a-z e "ação" vira "a-o", não "acao"

Perguntas rápidas sobre remover acento em JavaScript:

Preciso instalar alguma biblioteca?

Não, o normalize e o replace são do próprio JavaScript

Seria meio exagerado puxar um pacote inteiro pra resolver uma linha de código, né?

Como remover os acentos de um array inteiro?

Joga a função no map e pronto:

console.log(nomes.map(removerAcentos))

Por que o meu texto continua com acento depois do normalize?

Porque o retorno não foi guardado

String é imutável em JavaScript: essas funções devolvem uma string nova e não alteram a variável original, então lembra de reatribuir ou salvar em outra variável

Dá pra usar isso pra comparar duas strings ignorando acento?

Dá sim, é só passar as duas pela mesma função antes do comparativo, igual fizemos no filtro da lista aí em cima