Como usar expressões regulares em JavaScript

As expressões regulares, geralmente chamadas de “regex” ou “regexp”, são sequências de caracteres que descrevem padrões de pesquisa. Você pode usar expressões regulares para verificar se uma string contém um padrão específico, extrair informações de uma string e substituir uma parte de uma string por um novo texto.

Aprenda a sintaxe básica das expressões regulares e como usá-las em JavaScript.

Sintaxe básica de expressões regulares

Existem duas maneiras de criar expressões regulares em JavaScript: usando literais de expressão regular e usando o construtor RegExp.

Então, um literal de expressão regular consiste em um padrão entre barras, seguido por um sinalizador opcional.

Por exemplo:

// Sem sinalizador
const regexExpression_1 = /pattern/
// Com sinalizador
const regexExpression_2 = /pattern/flag

Um sinalizador é um parâmetro opcional que você pode adicionar a uma expressão regular para modificar seu comportamento. Por exemplo:

const regexFlag = /the/g;

O sinalizador g significa que a expressão deve corresponder a todas as ocorrências, não apenas à primeira.

Você também pode criar expressões regulares usando o construtor RegExp. Por exemplo:

const regexExpression = new RegExp("Pattern", "g");

O construtor RegExp usa dois parâmetros: um padrão — uma string literal ou expressão regular — e um sinalizador.

Em JavaScript, existem dois sinalizadores muito comuns para expressões regulares:

• g : O sinalizador global faz com que a expressão regular corresponda a todas as ocorrências do padrão na string especificada, em vez de uma única ocorrência.
• i : O sinalizador que não diferencia maiúsculas de minúsculas torna a expressão regular indiferente a maiúsculas e minúsculas no padrão e corresponde a caracteres maiúsculos e minúsculos na string fornecida.

Portanto, você pode usar sinalizadores juntos em uma única expressão em qualquer ordem. Por exemplo:

const regexExpression = new RegExp("Pattern", "gi");

Essa expressão corresponderá a todas as ocorrências de “Padrão”, independentemente de maiúsculas e minúsculas.

Metacaracteres em Expressões Regulares

Em expressões regulares, há certos caracteres que possuem significados especiais, conhecidos como metacaracteres. Então, você pode usá-los para combinar caracteres ou padrões específicos.

Aqui estão alguns dos metacaracteres mais comuns e seus significados:

• Caractere curinga ( . ): Corresponde a qualquer caractere individual, exceto uma nova linha. É uma ferramenta útil para combinar padrões com caracteres desconhecidos.
• Estrela de Kleene ( * ): Corresponde a zero ou mais ocorrências do caractere ou grupo anterior. Permite que o caractere ou grupo preceda apareça várias vezes na string, incluindo zero vezes.
• Caractere opcional ( ? ): Corresponde a zero ou uma ocorrência do caractere ou grupo anterior.
• Início da âncora de linha ( ^ ): Corresponde apenas ao início de uma linha ou string.
• Fim da âncora de linha ( $ ): Corresponde ao fim de uma linha ou string.
• Conjunto/Classe de Caracteres ( [] ): Corresponde a qualquer caractere em um conjunto específico em uma string. Define-se usando colchetes [] e pode-se especificar um conjunto fixo de caracteres, caracteres especiais ou grupos específicos de caracteres.
• Caractere de alternância ( | ): Corresponde ao caractere ou grupo anterior ou seguinte. Funciona de maneira semelhante ao operador OR em JavaScript.
• Agrupamento de caracteres ( () ): Permite agrupar caracteres ou subexpressões, aplicar operadores a eles como uma unidade e controlar a ordem das operações.

Testar uma string em uma expressão regular em JavaScript

Em JavaScript, você pode testar strings em expressões regulares de várias maneiras. Veja 3 maneira abaixo:

Método de teste

O método .test() retorna um booleano indicando se a expressão regular correspondeu à string. Este método usa uma string como argumento para realizar a pesquisa. É especialmente útil para verificações simples.

Por exemplo:

let regex = /.com$/;
let str = "example.com";
console.log(regex.test(str)); // true

Esta expressão regular corresponde a strings que terminam com “.com”.

Método de execução

O método .exec() retorna uma matriz (array) contendo o texto correspondente e quaisquer grupos capturados ou nulo se nenhuma correspondência for encontrada. Portanto, este método usa uma string como argumento para realizar a pesquisa. É útil para expressões regulares mais complexas.

Por exemplo:

let regex = /^\\(?([0-9]{3})\\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
let str = "123-456-7890";
let result = regex.exec(str);
if (result !== null) {
  console.log(`${result[0]} is a valid phone number`);
} else {
  console.log("Invalid phone number");
}

Esta expressão regular valida números de telefone nos formatos “xxx-xxx-xxxx” ou “xxxxxxxxxx”, onde x é um dígito de 0 a 9. Aqui está uma explicação detalhada da expressão:

• “^”: O ancorador de início de linha, indica que a string deve começar exatamente com o que está sendo procurado.
• “\(“: Caso o primeiro parêntese esteja presente, ele será escapado usando uma barra invertida.
• “(?([0-9]{3})\)”: O grupo opcional, onde “(?:” torna o grupo opcional e “( [0-9]{3})” corresponde a exatamente 3 dígitos.
• “?”: O caractere opcional, indica que o parêntese pode ou não estar presente.
• “[-. ]”: O conjunto de caracteres, corresponde a um ponto, hífen ou espaço.
• “([0-9]{3})”: O segundo grupo, corresponde a exatamente 3 dígitos.
• “([0-9]{4})”: O terceiro grupo, corresponde a exatamente 4 dígitos.
• “$”: O ancorador de fim de linha, indica que a string deve terminar exatamente com o que está sendo procurado.

O método exec() da expressão regular é usado para comparar a string com o padrão. Se a string corresponder ao padrão, ele retorna um array com todos os grupos capturados (no caso, [0], [1], [2], e [3]), caso contrário, retorna null. Então, na condição if, verificamos se o resultado é diferente de null, e se for, mostramos uma mensagem de número de telefone válido. Caso contrário, mostramos a mensagem “Invalid phone number”.

Método de substituição

O método .replace() localiza uma correspondência entre uma expressão regular e uma string e substitui o texto correspondente pelo texto de substituição especificado. Portanto, este é um método de um objeto string que recebe uma expressão regular e uma string de substituição como argumentos.

Por exemplo:

let string = "The quick brown fox jumps over the lazy dog.";
let expression = /The/gi;
let newString = string.replace(expression, "a");
console.log(newString); // "a quick brown fox jumps over a lazy dog."

Este exemplo chama o método replace() em uma variável de string, passando a expressão de expressão regular. A expressão regular corresponderá a todas as ocorrências de “The” na string, independentemente do caso. Então, chamar o método replace o instrui a substituir cada ocorrência pela string “a”.

Considerações de desempenho ao usar expressões regulares

Embora as expressões regulares sejam úteis para correspondência e manipulação de strings, elas também têm um alto custo de desempenho. Portanto, tornar os padrões o mais específicos possível e mantê-los simples é fundamental para mantê-los funcionando bem.

Leia também: 5 vulnerabilidades perigosas em aplicativos da web e como encontrá-las