{ replace String JavaScript } Como manipular strings

JavaScript

{ replace String JavaScript } Como manipular strings

Gabriel Nascimento
Escrito por Gabriel Nascimento em 28 de junho de 2022

O método replace em javascript serve para fazer desde simples substituições de string até complexas mudanças com regex.

Como por exemplo: tirar caracteres especiais, pontos, traços, operadores e qualquer outra parte indesejada de um texto.

Então continue lendo esse artigo para aprender como usar esse recurso incrível do javascript. 

Como funciona o string replace?

O replace serve para localizar uma sequencia de caracteres dentro de uma string e substituir por outra.

Para isso, o método replace() recebe 2 parâmetros:

  • search: o trecho a ser localizado na string original;
  • replacement: o conteúdo que vai substituir esse trecho.
let newStr = str.replace(search, replacement);

Dessa forma, o replace() percorre toda a string em busca da sequência a ser substituída…

E caso a sequência não seja encontrada, nenhuma substituição é feita.

No exemplo abaixo, o método procura a palavra “blog” e substitui por “arsenal”:

let str = 'Warcontent o blog do programador';

let newStr = str.replace('blog', 'arsenal');

console.log(newStr);

// 'Warcontent o arsenal do programador'

Exemplo prático do string replace em javascript

É comum termos que lidar com valores de CPF em formulários web.

Porém muitas vezes o CPF vem formatado com . e -, e o que nos interessa são apenas os números.

Nesse caso, um bom primeiro passo seria usar o replace() para retirar o -:

let cpf = '999.999.999-99';

let cpfSemTraco = cpf.replace('-', '');

console.log(cpfSemTraco);

// '999.999.99999'

Mas se tentarmos apagar os . com o mesmo método, apenas o primeiro será alterado:

let cpfSemFormatacao = cpfSemTraco.replace('.', '');

console.log(cpfSemFormatacao);

// '999999.99999'

Isso ocorre porque, no caso da função localizar mais de uma string, o replace() troca apenas a primeira ocorrência.

Então como resolvemos esse problema? 

Substituições complexas com replace e regex

replace regex javascript

Para realizar mudanças mais complexas, você pode usar uma expressão regular no primeiro parâmetro.

Por exemplo, para pegar apenas os números do CPF, uma alternativa é utilizar a expressão /[^0-9]/ da seguinte maneira:

let cpf = '999.999.999-99';

let cpfSemFormatacao = cpf.replace('/[^0-9]/', '');

console.log(cpfSemFormatacao);

// '99999999999'

Essa combinação ( /[^0-9]/ ) diz para o replace substituir qualquer string diferente de 0 a 9.

Ou seja, tudo que não for número. 

E caso você não esteja acostumado com regex, e tenha se perdido nessa combinação esquisita, veja esse guia básico sobre o assunto

Replace x Replace All em Javascript 

String Replace All JavaScript

Por último, a melhor maneira de você substituir todas as ocorrências de uma substring na string original é pelo método replaceAll():

let newStr = str.replaceAll(search, replacement);

Perceba que sua assinatura é bem parecida com a do método replace()

Porém o replaceAll() não para sua execução depois da primeira substituição. 

Dessa forma, também poderíamos retirar a formatação do CPF da seguinte maneira: 

let cpf = '999.999.999-99';

let cpfSemTraco = cpf.replace('-', '');

let cpfSemFormatacao = cpf.replaceAll('.', '');

console.log(cpfSemFormatacao);

// '99999999999'

Para se aprofundar no método replaceAll em JavaScript, dê uma olhada nesse artigo

Conclusão

Certamente o string replace é um método muito poderoso e versátil do javascript.

E embora esse tutorial básico sirva para a maioria das situações, caso você queira ir além, recomendo que dê uma olhada nesse guia mais completo.

E se você gostou desse artigo, ou ficou com alguma dúvida, deixe seu comentário abaixo:

Hey,

o que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado.

One Reply to “{ replace String JavaScript } Como manipular strings”