Como remover caracteres não alfanuméricos de string

Neste artigo você vai aprender a como criar um recurso de remover caracteres não alfanuméricos de string em JavaScript

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

Existem diversas formas de se remover caracteres não alfanuméricos de uma string em JavaScript. Vamos ver algumas delas a seguir.

Uma forma de se fazer isso é utilizando a função replace do objeto String.

Ela permite substituir uma parte da string por outra. Podemos utilizá-la para substituir todos os caracteres não alfanuméricos por uma string vazia, o que remove esses caracteres da string. Por exemplo:

function removerCaracteresNaoAlfanumericos(string) {
  return string.replace(/[^a-zA-Z0-9]/g, "");
}

console.log(removerCaracteresNaoAlfanumericos("Olá, mundo!")); // "Ol mundo"

Nesse exemplo, criamos uma função chamada removerCaracteresNaoAlfanumericos que recebe uma string como parâmetro.

Em seguida, utilizamos a função replace para substituir todos os caracteres não alfanuméricos da string por uma string vazia.

Utilizamos uma expressão regular (/[^a-zA-Z0-9]/g) para selecionar apenas os caracteres não alfanuméricos.

O g no final da expressão regular indica que a substituição deve ser feita em toda a string, e não apenas no primeiro caractere encontrado.

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

Outras formas de remover caracteres não alfanuméricos de texto

Outra forma de se fazer isso é utilizando o método match do objeto String.

Ele permite selecionar apenas os caracteres alfanuméricos da string e retorná-los em um array.

Podemos utilizá-lo para criar uma nova string apenas com os caracteres alfanuméricos. Por exemplo:

function removerCaracteresNaoAlfanumericos(string) {
  const caracteresAlfanumericos = string.match(/[a-zA-Z0-9]/g);
  return caracteresAlfanumericos ? caracteresAlfanumericos.join("") : "";
}

console.log(removerCaracteresNaoAlfanumericos("Olá, mundo!")); // "Olmundo"

Nesse exemplo, criamos uma função chamada removerCaracteresNaoAlfanumericos que recebe uma string como parâmetro.

Em seguida, utilizamos o método match para selecionar apenas os caracteres alfanuméricos da string e retorná-los em um array.

Se quisermos, podemos utilizar a função Array.from para transformar a string em um array de caracteres e, em seguida, utilizar o método filter para remover os caracteres não alfanuméricos. Por exemplo:

function removerCaracteresNaoAlfanumericos(string) {
  return Array.from(string)
    .filter((char) => char.match(/[a-zA-Z0-9]/))
    .join("");
}

console.log(removerCaracteresNaoAlfanumericos("Olá, mundo!")); // "Olmundo"

Nesse exemplo, utilizamos a função Array.from para transformar a string em um array de caracteres. Em seguida, utilizamos o método filter para remover os caracteres não alfanuméricos.

Utilizamos uma expressão regular (/[a-zA-Z0-9]/) para selecionar apenas os caracteres alfanuméricos. Por fim, utilizamos o método join para juntar os caracteres em uma única string.

Deixe um comentário contando o que achou deste artigo 🙂

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

Conclusão

Neste artigo você aprendeu várias formas de remover caracteres não alfanuméricos de string

Utilize a que melhor se encaixa no seu projeto, e resolva o seu problema! 🙂

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!

E os acentos? Por que o "á" também some:

Repara na saída do exemplo acima: o "á" de "Olá" foi embora junto com a vírgula e a exclamação

Isso acontece porque a faixa a-zA-Z cobre só o alfabeto sem acento, então á, ç, ã, ê e companhia entram no saco dos "não alfanuméricos" e são removidos também

Se o teu objetivo é manter o texto legível em português, o caminho é normalizar antes: transformar "á" em "a" e só depois fazer a limpeza

function removerCaracteresNaoAlfanumericos(string) {
return string
.normalize("NFD")
}

console.log(removerCaracteresNaoAlfanumericos("Olá, mundo!")); // "Olamundo"

O normalize("NFD") separa a letra do acento (o "á" vira "a" mais o sinal solto), aí o primeiro replace tira só os sinais e o segundo faz a limpeza normal

Agora, se tu quer o contrário, MANTER os acentos e tirar só pontuação e símbolo, é só incluir as letras acentuadas na tua faixa:

function removerCaracteresNaoAlfanumericos(string) {
}

console.log(removerCaracteresNaoAlfanumericos("Olá, mundo!")); // "Olámundo"

O i no final faz a regra valer pra maiúscula também, beleza? 🙂

Como remover caracteres especiais mantendo os espaços:

Esse é o pedido mais comum de todos: limpar a sujeira do texto sem grudar uma palavra na outra

Como o espaço não é letra nem número, ele cai na regra e some junto

A solução é simples, coloca o espaço dentro da negação da regex:

function limparMantendoEspacos(string) {
}

console.log(limparMantendoEspacos("Olá, mundo!")); // "Ol mundo"

E se o texto vier com tabulação ou quebra de linha, troca o espaço por \s, que cobre todos os tipos de espaço em branco de uma vez:

Quer os dois de uma vez, sem acento e com espaço preservado? Junta com o normalize do tópico anterior e tá resolvido

Casos reais: só os números, só as letras e o slug de URL:

Na vida real quase nunca tu quer "tudo alfanumérico", tu quer uma fatia específica… se liga nos três casos que mais aparecem

Só os números (clássico de CPF, CEP e telefone antes de mandar pro backend):

const telefone = "(11) 98888-7777";

console.log(telefone.replace(/\D/g, "")); // "11988887777"

O \D é o atalho pra "tudo que não é dígito", bem mais curto que escrever a faixa na mão

Só as letras:

const nome = "Matheus 123!";

E o famoso slug de URL, que é limpeza de caractere com um tempero a mais:

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

console.log(gerarSlug("Olá, mundo! Bora codar?")); // "ola-mundo-bora-codar"

Tira o acento, joga pra minúscula, troca cada bloco de sujeira por um hífen e no fim limpa hífen sobrando na ponta

Tome cuidado!

Qual das três formas usar?

O post te deu três caminhos, então bora ao resumo sem enrolação:

replace com regex: é o padrão… curto, legível e resolve a maioria dos casos. Se tu não tem um motivo forte pra fugir dele, fica nesse

match: bom quando tu quer enxergar os caracteres que sobraram, porque ele te devolve um array. Tome cuidado! Se a string não tiver NENHUM caractere alfanumérico, o match devolve null e o join estoura erro… aquele ternário no exemplo lá em cima não é firula, é o que segura esse caso

Array.from com filter: é o mais verboso dos três, mas fica confortável quando tu já vai encadear outras regras no mesmo passo, tipo filtrar e transformar de uma vez

Os três chegam no mesmo resultado, a escolha é de leitura de código e do que tu vai fazer depois com o texto

Perguntas frequentes:

O que é um caractere alfanumérico?

É letra ou número, simples assim… A, b, Z, 0 e 9 entram na conta

Todo o resto (espaço, vírgula, ponto, arroba, cifrão, emoji, quebra de linha) é não alfanumérico e cai fora na limpeza

Como remover caracteres não alfanuméricos mantendo o espaço?

Assim ele fica de fora da regra e sobrevive à limpeza

Como tirar só os acentos, sem apagar o resto do texto?

O texto continua inteiro, só que sem acentuação

Emoji também é removido?

É removido sim, emoji não é letra nem número, então some junto na limpeza

Preciso instalar alguma biblioteca pra isso?

Não precisa… replace, match, filter e normalize são recursos de String e RegExp da própria linguagem 🙂