Como escapar caracteres especiais com JavaScript

Neste artigo você vai aprender a como escapar caracteres especiais com JavaScript, ou seja, remover caracteres especiais dos textos (strings)

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

Escapar caracteres especiais de strings é a melhor maneira de manter a sua aplicação segura

Nunca devemos confiar nas inserções de dados feitas pelos usuários do sistema

Vamos utilizar então o método replaceAll que vai identificar todos os casos de substituição e trocar por caracteres válidos, que não farão mal ao seu sistema

Há um famoso snippet que remove os caracteres especiais do HTML, veja:

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

const escapeHtmlChars = (text) => {
    return text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

Aqui estamos trocando os símbolos especiais do HTML por texto comum

Agora se você precisa remover os caracteres especiais, como:

• @;
• &;
• %;
• #;
• E outros;

O código que você vai utilizar é:

const cleanString = text.replace(/[^a-zA-Z0-9 ]/g, '');

Aqui estamos usando uma regex que não permite caractere especial algum

Ou seja, aceita apenas números de 1 a 9 e letras de a a z

Na variável convertedFile você terá o arquivo já em Base64!

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

Conclusão

No artigo de hoje você aprendeu a como escapar caracteres especiais com JavaScript

Utilizamos duas abordagens:

• A primeira foi para remover caracteres especiais de HTML;
• A segunda para remover qualquer caractere especial, como: @, # e outros

Agora basta você decidir qual utilizar para o seu caso, e trocar os nomes das variáveis para atender o seu projeto

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!

Talvez você esteja se perguntando: por que replaceAll e não só replace?

É simples: o replace troca só a PRIMEIRA ocorrência que ele encontra na string

Já o replaceAll troca TODAS as ocorrências de uma vez, sem você precisar de regex com a flag /g

Como numa string de HTML normalmente tem vários ‘<‘, vários ‘>’ e vários ‘&’ espalhados, o replaceAll faz o trabalho completo de uma tacada só

Se você quisesse o mesmo efeito com replace, teria que escrever algo assim: text.replace(/&/g, ‘&amp;’)

A flag /g no fim da regex é o que diz pro JavaScript ‘troca em tudo, não pare no primeiro’

Vale destrinchar essa regex, porque ela assusta quem tá começando mas é bem lógica

O acento circunflexo ^ logo no começo INVERTE o conjunto, ou seja, ‘tudo que NÃO for isso aqui’

a-z são as letras minúsculas, A-Z as maiúsculas e 0-9 os números

Repara que tem um espaço em branco ali dentro, depois do 0-9: é ele que permite manter os espaços entre as palavras

O g no final é a flag global, que aplica a troca na string inteira

Juntando tudo: ‘pega qualquer coisa que não seja letra, número ou espaço, e troca por vazio’

Um caso que confunde muita gente: acento NÃO é a mesma coisa que caractere especial pra aquela regex de cima

Quando o que você quer é trocar ‘ação’ por ‘acao’ (e não sumir com a letra), a jogada é o normalize

O normalize(‘NFD’) separa a letra do acento, aí uma regex limpa só os acentos:

Aqui o ‘á’ vira ‘a’, o ‘ç’ vira ‘c’ e por aí vai, mantendo a palavra legível

Muito usado pra gerar slug de URL, comparar busca sem se importar com acento, essas coisas

Qual a diferença entre replace e replaceAll?

O replace troca só a primeira ocorrência (ou todas, se você usar regex com a flag /g)

Já o replaceAll troca todas as ocorrências direto, sem precisar de regex

Como permitir também acentos ou outros símbolos na limpeza?

É só incluir eles dentro dos colchetes da regex

A regra é sempre a mesma: o que estiver dentro do conjunto depois do ^ é o que sobrevive