Substituição de string JavaScript()

Resumo : neste tutorial, você aprenderá a usar replace()o método JavaScript String para substituir uma substring em uma string por uma nova.

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

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

let newStr = str.replace(substr, newSubstr);Linguagem de código:  JavaScript  ( javascript )

O método JavaScript String replace()retorna uma nova string com uma substring ( substr) substituída por uma nova ( newSubstr).

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

Exemplos de substituição de string JavaScript()

O exemplo a seguir usa the replace()para substituir the JSna string 'JS will, JS will rock you'pela nova substring JavaScript:

let str = 'JS will, JS will rock you!';
let newStr = str.replace('JS','JavaScript');

console.log(newStr);Linguagem de código:  JavaScript  ( javascript )

Saída:

JavaScript will, JS will rock you!Linguagem de código:  JavaScript  ( javascript )

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

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

Usando expressões regulares

O replace()método oferece suporte total a expressões regulares:

let newStr = str.replace(regexp, newSubstr);Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe, o replace()método encontra todas as correspondências em str, substitui-as por newSubstre retorna uma nova string ( newStr).

O exemplo a seguir usa o sinalizador global ( g) para substituir todas as ocorrências de JSin strthe por JavaScript:

let str = 'JS will, JS will rock you!';
let newStr = str.replace(/JS/g,'JavaScript');

console.log(newStr);
Linguagem de código:  JavaScript  ( javascript )

Saída:

JavaScript will, JavaScript will rock you!Linguagem de código:  JavaScript  ( javascript )

Se quiser ignorar casos para pesquisa e substituição, você pode usar o sinalizador de ignorar ( i) na expressão regular assim:

let str = 'JS will, Js will rock you!';
let newStr = str.replace(/JS/gi,'JavaScript');

console.log(newStr);Linguagem de código:  JavaScript  ( javascript )

Saída:

JavaScript will, JavaScript will rock you!Linguagem de código:  JavaScript  ( javascript )

Usando uma função de substituição

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

let newStr = str.replace(substr | regexp, replacer);Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe, o replace()método invocará a replacerfunção após a execução da correspondência. Em seguida, ele usa o resultado desta função como string de substituição.

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

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

function replacer(match, p1, p2, ..., offset, string);Linguagem de código:  JavaScript  ( javascript )

A seguir está o significado de cada parâmetro:

• match: é a substring correspondente.
• p1, p2,… pnsão a enésima string encontrada por um grupo de captura entre parênteses fornecido pela expressão regular.
• offset: é o deslocamento da substring correspondente em toda a string que está sendo pesquisada.
• string: é toda a string que está sendo examinada.

O exemplo a seguir usa a replace()função para alterar as substrings applese bananascolocá-las em maiúsculas. Ele passa uma função substituta para a replace()função:

let str = "I like to eat, eat, eat apples and bananas";
let re = /apples|bananas/gi;

let newStr = str.replace(re, (match) => { 
    console.log({match}); 
    return match.toUpperCase();
});

console.log(newStr);Linguagem de código:  JavaScript  ( javascript )

Saída:

{match: "apples"}
{match: "bananas"}
I like to eat, eat, eat APPLES and BANANAS
Linguagem de código:  JavaScript  ( javascript )

Resumo

• Use o replace()método para retornar uma nova string com uma substring substituída por uma nova.
• Use uma expressão regular com o sinalizador global ( g) para substituir todas as ocorrências de uma substring por uma nova.