Substituição de Regex JavaScript – Acervo Lima Tutorials

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. Se newSubstrestiver vazio, o replace()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 regexpnã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 JSstring pela JavaScriptstring:

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/icorrespondências JSe jsna '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 newSubstra $Nsintaxe onde Nestá 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 $1para fazer referência ao primeiro grupo de captura e $2para fazer referência ao segundo. Para trocar o nome e o sobrenome, colocamos $2primeiro 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 replacerFunctiondepois de encontrar a primeira correspondência. O replacerFunctioné usado para criar uma substring para substituir a correspondência.

Se regexpusar o sinalizador global ( g), o replace()método chamará o replacerFunctionapós cada correspondência.

O replacerFunctiontem os seguintes argumentos:

matchespecifica 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 )