Resumo : neste tutorial, você aprenderá como usar o método string replace() para retornar uma nova string com algumas ou todas as correspondências de uma expressão regular substituídas por uma string de substituição.
Introdução ao método JavaScript replace()
O String.prototype.replace()
método funciona tanto com strings quanto com expressões regulares . Este tutorial se concentra exclusivamente em expressões regulares.
O seguinte mostra a sintaxe do replace()
método:
replace(regexp, newSubstr)
Nesta sintaxe:
- A
regexp
é uma expressão regular para corresponder. - The
newSubstr
é uma string para substituir as correspondências. SenewSubstr
estiver vazio, oreplace()
método remove as correspondências.
O replace()
retorna uma nova string com as correspondências substituídas por newSubstr
. Observe que o replace()
método não altera a string original, mas retorna uma nova string.
Por padrão, o replace()
método substitui a primeira correspondência se regexp
não usar o sinalizador global ( g
). Para substituir todas as correspondências, você usa o sinalizador global ( g
) no arquivo regexp
.
Exemplos de métodos JavaScript regex replace()
Vejamos alguns exemplos de uso do replace()
método.
1) Um exemplo simples do método JavaScript regex replace()
O exemplo a seguir usa o replace()
método para substituir a primeira correspondência da JS
string pela JavaScript
string:
const s = 'JS and js';
const re = /js/i;
const newS = s.replace(re, 'JavaScript');
console.log(newS);
Linguagem de código: JavaScript ( javascript )
Saída:
JavaScript and js
As /js/i
correspondências JS
e js
na 'JS and js'
string. No entanto, o replace()
método substitui apenas a primeira correspondência ( JS
).
Para substituir todas as correspondências, você usa o sinalizador global ( g
) na expressão regular.
2) Usando o método JavaScript regex replace() com o sinalizador global
O exemplo a seguir usa o replace()
método com uma expressão regular contendo um sinalizador global ( g
) para substituir todas as correspondências:
const s = 'JS and js';
const re = /js/gi;
const newS = s.replace(re, 'JavaScript');
console.log(newS);
Linguagem de código: JavaScript ( javascript )
Saída:
JavaScript and JavaScript
3) Usando o método JavaScript regex replace() com captura de grupos
Quando uma expressão regular contém os grupos de captura , você pode referenciar esses grupos usando newSubstr
a $N
sintaxe onde N
está o número do agrupamento. Por exemplo, $1 e $2 fazem referência ao primeiro e ao segundo grupos de captura.
O exemplo a seguir ilustra como usar o replace()
método com captura de grupos para trocar o nome e o sobrenome em um nome de pessoa:
let re = /(\w+)\s(\w+)/;
let name = 'Jane Doe';
let lastFirst = name.replace(re, '$2, $1');
console.log(lastFirst);
Linguagem de código: JavaScript ( javascript )
Saída:
Doe, Jane
Como funciona.
A expressão regular /(\w+)\s(\w+)/
corresponde a um ou mais caracteres de palavra, um espaço e, em seguida, a um ou mais caracteres de palavra. Em outras palavras, corresponde a qualquer string que contenha uma palavra, um espaço e outra palavra.
A expressão regular contém dois grupos de captura. O primeiro grupo de captura captura a primeira palavra e o segundo captura a segunda palavra após o espaço.
No newSubstr
, usamos $1
para fazer referência ao primeiro grupo de captura e $2
para fazer referência ao segundo. Para trocar o nome e o sobrenome, colocamos $2
primeiro a segunda correspondência ( ) e depois a primeira correspondência ( $1
).
Método JavaScript regex replace() com função de substituição
O segundo argumento do replace()
método pode ser uma função como esta:
replace(regexp, replacerFunction)
O replace()
método chama o replacerFunction
depois de encontrar a primeira correspondência. O replacerFunction
é usado para criar uma substring para substituir a correspondência.
Se regexp
usar o sinalizador global ( g
), o replace()
método chamará o replacerFunction
após cada correspondência.
O replacerFunction
tem os seguintes argumentos:
match
especifica a substring correspondente.p1
,p2
,… os valores dos grupos de captura na regexp.offset
é um número inteiro que especifica o deslocamento da substring correspondente na string de entrada.string
é a string de entrada.groups
é um objeto cujos são o grupo de captura nomeado e os valores são valores correspondentes.
Vejamos um exemplo de uso do replace()
método com uma função substituta.
Suponha que você tenha uma string como esta:
backgroundColor
E você deseja transformá-lo em algo como:
background-color
Para fazer isso você pode usar o replace()
método com uma função substituta.
Primeiro, construa uma expressão regular que corresponda a uma letra maiúscula:
/[A-Z]/g
Segundo, defina uma função substituta:
function replacer(match, offset) {
return (offset > 0 ? '-' : '') + match.toLowerCase();
}
Linguagem de código: JavaScript ( javascript )
A replacer()
função adiciona um hífen se a letra correspondente não estiver no início da string e concatena o hífen com a letra correspondente convertida em minúscula.
Terceiro, use o replace()
método para substituir a correspondência pela substring retornada da replacer()
função:
function addHyphen(prop) {
return prop.replace(/[A-Z]/g, replacer);
}
Linguagem de código: JavaScript ( javascript )
O seguinte mostra o código completo:
function replacer(match, offset) {
return (offset > 0 ? '-' : '') + match.toLowerCase();
}
function addHyphen(prop) {
return prop.replace(/[A-Z]/g, replacer);
}
const prop = 'backgroundColor';
console.log(addHyphen(prop));
Linguagem de código: JavaScript ( javascript )
Saída:
background-color
Para tornar o código mais conciso, você pode usar funções de seta com a função de substituição como uma função de retorno de chamada como esta:
const addHyphen = (prop) =>
prop.replace(
/[A-Z]/g,
(match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase()
);
const prop = 'backgroundColor';
console.log(addHyphen(prop));
Linguagem de código: JavaScript ( javascript )
Resumo
- Use o
replace()
método para encontrar correspondências em uma expressão regular e substituir as correspondências por uma nova substring.