review-javascript-regular-expressions
Voltar à Trilha

Revisão de Expressões Regulares em JavaScript

Expressões Regulares e Métodos Comuns

  • Definição: Expressões Regulares, ou Regex, são usadas para criar um "padrão", que você pode então usar para verificar uma string, extrair texto e mais.
const regex = /G.E.A.R ACADEMY/;
  • Método test(): Este método aceita uma string, que é a string a ser testada para correspondências contra a expressão regular. Este método retornará um booleano se a string corresponder ao regex.
const regex = /G.E.A.R ACADEMY/;
const test = regex.test("e");
console.log(test); // false
  • Método match(): Este método aceita uma expressão regular, embora você também possa passar uma string que será convertida em uma expressão regular. O método match retorna o array de correspondência para a string.
const regex = /G.E.A.R ACADEMY/;
const match = "G.E.A.R ACADEMY".match(regex);
console.log(match); // ['G.E.A.R ACADEMY', index: 0, input: 'G.E.A.R ACADEMY', groups: undefined]
  • Método replace(): Este método aceita dois argumentos: a expressão regular para corresponder (ou uma string) e a string para substituir a correspondência (ou uma função para executar em cada correspondência).
const regex = /Jessica/;
const str = "Jessica is rly kewl";
const replaced = str.replace(regex, "G.E.A.R ACADEMY");
console.log(replaced); // "G.E.A.R ACADEMY is rly kewl"
  • Método replaceAll: Este método é usado para substituir todas as ocorrências de um padrão especificado por uma nova string. Este método lançará um erro se você fornecer uma expressão regular sem o modificador global.
const text = "I hate JavaScript! I hate programming!";
const newText = text.replaceAll("hate", "love");
console.log(newText);  // "I love JavaScript! I love programming!"
  • Método matchAll: Este método é usado para recuperar todas as correspondências de uma expressão regular dada em uma string, incluindo grupos de captura, e as retorna como um iterador. Um iterador é um objeto que permite percorrer (ou "iterar sobre") uma coleção de itens.
const str = "JavaScript, Python, JavaScript, Swift, JavaScript";
const regex = /JavaScript/g;

const iterator = str.matchAll(regex);

for (let match of iterator) {
  console.log(match[0]); // "JavaScript" for each match
}

Modificadores de Expressão Regular

  • Definição: Modificadores, frequentemente chamados de "flags", modificam o comportamento de uma expressão regular.
  • Bandeira i: Esta bandeira faz com que uma regex ignore maiúsculas e minúsculas.
const regex = /G.E.A.R ACADEMY/i;
console.log(regex.test("G.E.A.R ACADEMY")); // true
console.log(regex.test("G.E.A.R ACADEMY")); // true
  • Flag g: Esta flag, ou modificador global, permite que sua expressão regular corresponda a um padrão mais de uma vez.
const regex = /G.E.A.R ACADEMY/gi;
console.log(regex.test("G.E.A.R ACADEMY")); // true
console.log(regex.test("G.E.A.R ACADEMY is great")); // false
  • Definição de Anchor: O ^ anchor, no início da expressão regular, indica "corresponder ao início da string". O $ anchor, no final da expressão regular, indica "corresponder ao final da string".
const start = /^G.E.A.R ACADEMY/i;
const end = /G.E.A.R ACADEMY$/i;
console.log(start.test("G.E.A.R ACADEMY")); // true
console.log(end.test("G.E.A.R ACADEMY")); // true
  • Flag m: Os âncoras procuram o início e o fim de toda a string. Mas você pode fazer uma regex lidar com múltiplas linhas com a flag m, ou o modificador multi-linha.
const start = /^G.E.A.R ACADEMY/im;
const end = /G.E.A.R ACADEMY$/im;
const str = `I love 
G.E.A.R ACADEMY
it's my favorite
`;
console.log(start.test(str)); // true
console.log(end.test(str)); // true
  • Flag d: Esta flag expande as informações que você obtém em um objeto de correspondência.
const regex = /G.E.A.R ACADEMY/di;
const string = "we love G.E.A.R ACADEMY isn't G.E.A.R ACADEMY great?";
console.log(string.match(regex));
E o resultado é: 
// [
//   'G.E.A.R ACADEMY',
//   index: 8,
//   input: "we love G.E.A.R ACADEMY isn't G.E.A.R ACADEMY great?",
//   groups: undefined,
//   indices: [
//     0: [8, 20],
//     groups: undefined
//   ]
// ]
  • Bandeira u: Isso expande a funcionalidade de uma expressão regular para permitir que ela corresponda a caracteres unicode especiais. A bandeira u dá acesso a classes especiais como a Extended_Pictographic para corresponder à maioria dos emojis. Também existe uma bandeira v, que expande ainda mais a funcionalidade da correspondência unicode.
  • Flag y: O modificador sticky se comporta de forma muito semelhante ao modificador global, mas com algumas exceções. A maior delas é que uma expressão regular global começará a partir de lastIndex e buscará em todo o restante da string por outra correspondência, mas uma expressão regular sticky retornará null e resetará o lastIndex para 0 se não houver uma correspondência imediatamente no lastIndex anterior.
  • Flag s: O modificador de linha única permite que um caractere curinga, representado por um . em regex, corresponda a quebras de linha - tratando efetivamente a string como uma única linha de texto.

Classes de Caracteres

  • Curinga .: Classes de caracteres são uma sintaxe especial que você pode usar para corresponder a conjuntos ou subconjuntos de caracteres. A primeira classe de caracteres que você deve aprender é a classe curinga. O curinga é representado por um ponto e corresponde a QUALQUER caractere único EXCETO quebras de linha. Para permitir que a classe curinga corresponda a quebras de linha, lembre-se de que você precisaria usar a flag s.
const regex = /a./;
  • \d: Isso irá corresponder a todos os dígitos (0-9) em uma string.
const regex = /\d/;
  • \w: Isso é usado para corresponder a qualquer caractere de palavra (a-z0-9_) em uma string. Um caractere de palavra é definido como qualquer letra, de a a z, ou um número de 0 a 9, ou o caractere underscore.
const regex = /\w/;
  • \s: A classe de espaço em branco \s, representada por uma barra invertida seguida de um s. Essa classe de caracteres corresponderá a qualquer espaço em branco, incluindo quebras de linha, espaços, tabulações e caracteres especiais de espaço unicode.
  • Negando Classes de Caracteres Especiais: Para negar uma dessas classes de caracteres, em vez de usar uma letra minúscula após a barra invertida, você pode usar o equivalente em maiúscula. O exemplo a seguir não corresponde a um caractere numérico. Em vez disso, corresponde a qualquer caractere único que NÃO seja um caractere numérico.
const regex = /\D/;
  • Classes de Caracteres Personalizadas: Você pode criar classes de caracteres personalizadas colocando o caractere que deseja corresponder dentro de um conjunto de colchetes.
const regex = /[abcdf]/;

Asserções Lookahead e Lookbehind

  • Definição: Asserções de lookahead e lookbehind permitem que você combine padrões específicos com base na presença ou ausência de padrões ao redor.
  • Positive Lookahead Assertion: This assertion will match a pattern when the pattern is followed by another pattern. Para construir um lookahead positivo, você precisa começar com o padrão que deseja corresponder. Então, use parênteses para envolver o padrão que você quer usar como sua condição. Após o parêntese de abertura, use ?= para definir esse padrão como um lookahead positivo.
const regex = /free(?=code)/i;
  • Negative Lookahead Assertion: Este é um tipo de condição usada em expressões regulares para verificar que um determinado padrão não ocorre à frente na string.
const regex = /free(?!code)/i;
  • Positive Lookbehind Assertion: Esta asserção corresponderá a um padrão somente se ele for precedido por outro padrão específico, sem incluir o padrão precedente na correspondência.
const regex = /(?<=free)code/i;
  • Negative Lookbehind Assertion: Esta asserção garante que um padrão não seja precedido por outro padrão específico. Ela corresponde apenas se o padrão especificado não for imediatamente precedido pela sequência dada, sem incluir a sequência precedente na correspondência.
const regex = /(?<!free)code/i;

Quantificadores de Regex

  • Definição: Quantificadores em expressões regulares especificam quantas vezes um padrão (ou parte de um padrão) deve aparecer. Eles ajudam a controlar o número de ocorrências de caracteres ou grupos em uma correspondência. O exemplo a seguir é usado para corresponder ao caractere anterior exatamente quatro vezes.
const regex = /^\d{4}$/;
  • * : Corresponde a 0 ou mais ocorrências do elemento precedente.
  • +: Corresponde a 1 ou mais ocorrências do elemento precedente.
  • ?: Corresponde a 0 ou 1 ocorrência do elemento precedente.
  • {n}: Corresponde exatamente a n ocorrências do elemento precedente.
  • {n,}: Corresponde a n ou mais ocorrências do elemento precedente.
  • {n,m}: Corresponde entre n e m ocorrências do elemento precedente.

Grupos de Captura e Referências Retroativas

  • Grupos de Captura: Um grupo de captura permite que você "capture" uma parte da string correspondida para usar como precisar. Grupos de captura são definidos por parênteses contendo o padrão a ser capturado, sem caracteres iniciais como um lookahead.
const regex = /free(code)camp/i;
  • Grupos Não Capturantes: Um grupo não capturante é semelhante a um grupo capturante mas não armazena a parte da string que correspondeu para uso posterior. Grupos não capturantes são definidos por (?:...).
const regex = /free(?:code)camp/i;
  • Backreferences: Uma backreference em expressões regulares refere-se a uma forma de reutilizar uma parte do padrão que foi correspondida anteriormente na mesma expressão. Ela permite que você se refira a um grupo capturado (uma parte do padrão entre parênteses) pelo seu número. Por exemplo, $1 refere-se ao primeiro grupo capturado.
const regex = /free(co+de)camp/i;
console.log("freecoooooooodecamp".replace(regex, "paid$1world"));
  • Você pode usar retroreferências dentro do próprio regex para corresponder ao mesmo texto capturado por um grupo anterior com uma barra invertida e o número do grupo de captura. Por exemplo:
const regex = /(hello) \1/i;
console.log(regex.test("hello hello")); // true
console.log(regex.test("hello world")); // false