{ replace String JavaScript } Como manipular strings

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

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

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'