String replace() para substituir substrings no JavaScript

Aqui você aprenderá a usar o método replace() para substituir uma palavra por outra outra ou um caractere por outro.

Em termos mais técnicos você vai aprender como substituir uma substring em uma string por uma nova string, usando o método replace() da função nativa String() do JavaScript.

English version: https://www.javascripttutorial.net/javascript-string-replace/

Introdução ao método replace() de String JavaScript

O seguinte código mostra a sintaxe do método replace():

O método JavaScript String replace() retorna uma nova string newString de uma string já existente (str), porém substituído uma parte por outra. Para fazer a substituição é fornecido deve ser fornecido dois argumentos, uma substring substr que será substituída uma nova substring newSubstr.

Observe que o método replace() não altera a string original, ele retorna uma nova string.

Exemplos

O exemplo a seguir usa o replace() para substituir a substring 'JS' na string 'JS will, JS will rock you!' com a nova substring 'JavaScript':

Resultado:

Como você pode ver na saída, apenas a primeira ocorrência da substring 'JS' foi substituída pela nova substring 'JavaScript'.

Para substituir todas as ocorrências, de uma substring em uma string por uma nova substring, você deve usar uma expressão regular.

Caso você queria aprender o básico sobre expressões regulares, leia o tutorial no link abaixo:

Expressão Regular no JavaScript

Usando expressões regulares

O método replace() trabalha perfeitamente com expressões regulares:

Nesta sintaxe, o método replace() procura na string str todas as ocorrências definidas pela expressão regular regexp, substituindo essas ocorrências pela substring newSubstr e retornando uma nova string newString.

O exemplo a seguir usa o sinalizador global g para substituir todas as ocorrências de 'JS' na string str por 'JavaScript':

Resultado:

Se você desejar que tanto os termos com letras maiúsculas ou minúsculas sejam considerados para a pesquisa e substituição, use o marcador de ignore i na expressão regular, dessa forma:

Resultado:

Usando uma função de substituição

Em vez de passar uma newSubstr como segundo parâmetro do método replace(), você pode passar uma função de substituição da seguinte maneira:

Nessa sintaxe, o método replace() invocará a função replacer após a execução da correspondência. Em seguida, usará o resultado dessa função como string de substituição.

Se você usar o marcador global g na expressão regular, o método replace() invocará a função replacer para cada correspondência. Por exemplo, se houver 3 correspondências, o método replace() invocará a função replacer 3 vezes.

A função replacer() tem a seguinte sintaxe:

Confira o significado de cada parâmetro:

• match: É a substring correspondida.
• p1, p2, ... pn: São as enésimas (o que ocupa a posição do número n), encontradas por um grupo de captura entre parênteses fornecido pela expressão regular.
• offset: é o deslocamento da substring correspondida em toda a string que está sendo pesquisada.
• string: é a string (sequência de caracteres) inteira sendo examinada.

O exemplo a seguir usa a função replace() para alterar as substrings apples e bananas para letras maiúsculas. Ele passa uma função substituta para a função replacer():

Resultado:

Resumo

• Use o método replace() para criar uma nova string, substituindo uma parte por outra, ou seja, um uma substring existente por outra substring nova.
• Use uma expressão regular com o marcador global g para substituir todas as ocorrências de uma substring por uma nova.

Veja o índice de todos os tutoriais JavaScript

Confira uma série de outros tutoriais JavaScript que eu escrevi, clicando no link abaixo:

Tutoriais JavaScript