JavaScript: Como Substituir ou Remover Caracteres Especiais

Remover pontuações em JavaScript até que é uma tarefa fácil, mas remover acentos, deixando apenas as letras já é um pouco mais complicado. Independente da situação, disponibilizo abaixo algumas funções minimalistas que servem para ambos os casos.

Como remover acentos em JavaScript

Para simplesmente remover acentos e cedilha de uma string e retornar a mesma string sem os acentos, podemos usar o método String.prototype.normalize do ES6, seguido de um String.prototype.replace:

const str = 'ÁÉÍÓÚáéíóúâêîôûàèìòùÇç';
const parsed = str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
console.log(parsed);

Explicação

O método normalize foi introduzido na versão ES6 do JavaScript, em 2015. E serve para converter uma string em seu formato Unicode normalizado. Neste caso utilizamos o parâmetro NFD que é capaz de separar os acentos das letras e retornar seus códigos Unicode.

Para ter uma noção melhor de como funciona essa conversão para Unicode, acompanhe abaixo:

// String Á em UTF-18 tem 1 dígito
'Á'.length; // 1

// String Á em Unicode tem 2 dígitos: \u0041\u0301
'Á'.normalize('NFD').length; // 2

// Se tentarmos representar Unicode, vamos obter o seguinte resultado
console.log('\u0041\u0301'); // Á

Em seguida o método replace substitui todas as ocorrências de caracteres diacríticos, combinando-os na sequencia Unicode \u0300 - \u036F, outra vantagem do ES6 que foi adicionada para permitir ranges Unicode em RegEx.

Removendo todos os caracteres especiais em JavaScript

Para remover os acentos e outros caracteres especiais como /.?!(), basta usar a mesma fórmula acima, só que substituir tudo menos letras e números.

const str = 'ÁÉÍÓÚáéíóúâêîôûàèìòùÇç/.,[email protected]#$%&_-12345';
const parsed = str.normalize('NFD').replace(/([\u0300-\u036f]|[^0-9a-zA-Z])/g, '');
console.log(parsed);

Explicação

Para entender o que acontece no código acima, sugiro ler o parágrafo anterior onde falei sobre o método normalize e Unicode.

A única adição neste caso foi criar 2 grupos no regex através de ([ grupo 1 ]|[ grupo 2 ]) e adicionar ao grupo 2 a expressão regular [^0-9a-zA-Z], que significa: tudo o que não (^) for de 0-9, de a-z ou de A-Z, seja também substituído.

Se você não quiser remover espaços, basta adicionar \s:

str.normalize('NFD').replace(/([\u0300-\u036f]|[^0-9a-zA-Z\s])/g, '')

Substituindo caracteres especiais

Outro caso de uso bastante recorrente é a necessidade de limpar os acentos e em seguida substituir caracteres especiais por algum outro, exemplo: "Uma frase qualquer" -> "Uma-frase-qualquer".

Existe uma expressão regular muito boa para substituir caracteres que não sejam letras ou números comuns, porém esta expressão também acaba com acentos.

'Esta é uma frase'.replace(/[^\w\-]+/g, '-'); // Esta-uma-frase

Se quisermos remover somente os acentos e depois substituirmos outros caracteres especiais, precisamos seguir mais ou menos o que foi proposto no primeiro exemplo:

'Esta é uma frase'.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^\w\-]+/g, '-');

Mas de repente você também precisa substituir hífens desnecessários, como no caso de "Esta é uma frase!!!" virar "Esta-e-uma-frase---".

Uma função completa que remove acentos, substitui caracteres especiais por hífen, também removendo hífens adicionais:

const replaceSpecialChars = (str) => {
	return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '') // Remove acentos
		.replace(/([^\w]+|\s+)/g, '-') // Substitui espaço e outros caracteres por hífen
		.replace(/\-\-+/g, '-')	// Substitui multiplos hífens por um único hífen
		.replace(/(^-+|-+$)/, ''); // Remove hífens extras do final ou do inicio da string
}

console.log(replaceSpecialChars('Esta é uma frase!!!'));

Se quiser ainda usar essa mesma função para limpar uma URL, basta adicionar um toLowerCase() ao final e está resolvido!

Acho que cobri todos os casos mais recorrentes ao trabalhar com acentos e caracteres especiais em JavaScript. Infelizmente essa é uma dificuldade adicional de qualquer input latino que geralmente não é embutida nas linguagens de programação.

Este artigo foi útil pra você?

Ricardo Metring

Ricardo Metring

Sou desenvolvedor full stack e co-fundador da Criar.io.
Trabalho há 10 anos com programação e sempre interessado em aprender mais.

Artigos relacionados