Introdução – JavaScript | MDN (mozilla.org)

CAPÍTULO 10

Cortesia da Valeon (https://valedoacoonline.com.br/)

Expressões Regulares

• « Previous
• Next »

Expressões regulares são padrões utilizados para selecionar combinações de caracteres em uma string. Em JavaScript, expressões regulares também são objetos. Elas podem ser utilizadas com os métodos exec e test do objeto RegExp, e com os métodos match, replace, search, e split do objeto String. Este capítulo descreve o uso de expressões regulares em JavaScript.

Criando uma Expressão Regular

Há duas maneiras de construir uma expressão regular:

Usando uma expressão literal, que consiste em um padrão fechado entre barras, como o exemplo a seguir:

const re = /ab+c/;

As expressões regulares na forma literal são compiladas quando o script é carregado. Esta forma de construção possui melhor performace quando a expressão regular utilizada é uma constante, ou seja, não muda durante a execução.

Ou chamando o construtor do objeto RegExp:

let re = new RegExp("ab+c");

Usando o construtor, a compilação da expressão regular é realizada em tempo de execução. Use o construtor quando souber que o padrão da expressão regular irá mudar ou quando o padrão for desconhecido, oriundo de outra fonte, uma entrada de usuário por exemplo.

Nota: Se você já está familiarizado com as formas de uma expressão regular, também pode ler o resumo  para uma rápida pesquisa de um padrão específico.

Escrevendo um padrão de expressão regular

Um padrão de expressão é composto por um conjunto de caracteres simples, como /abc/, ou uma combinação de caracteres simples e especiais, como /ab*c/ ou /Capitulo (\d+)\.\d*/. O último exemplo contém parênteses, que são usados como um mecanismo de armazenamento. A correspondência feita por essa parte da expressão é armazenada para uso posterior, como descrito em: Using Parenthesized Substring Matches.

Uso de Padrões Simples

Padrões simples são construídos utilizando os caracteres que você deseja encontrar correspondências diretas. Por exemplo, o padrão /abc/ encontra combinações de caracteres em strings apenas quando os caracteres ‘abc’ forem encontrados juntos e na ordem especificada. Esse padrão será encontrado com sucesso nas strings “Olá, você conhece o abc?” e “Os mais recentes aviões evoluíram do slabcraft.”. Em ambos os casos, a correspondência estará no subconjunto ‘abc’. Porém, o padrão não será encontrado no texto “Grab crab” pois apesar de conter os mesmos caractes do padrão ‘ab c’, estes não aparecem na ordem especificada.

Uso dos Caracteres Especiais

Quando for necessário buscar algo além de uma correspondência direta, como encontrar uma ou mais ocorrências da letra ‘b’, ou encontrar espaços em branco, será necessário adicionar caracteres especiais ao padrão. Por exemplo, para encontrar uma única correspondência de ‘a’ seguido de nenhum ou mais ‘b’s seguido de ‘c’, o padrão a utilizar seria /ab*c/. O caractere * seleciona zero ou mais ocorrências do item que o precede. Se aplicada ao texto ‘cbbabbbbcdebc’, essa expressão regular encontraria o subconjunto grifado no texto.

A tabela abaixo fornece uma lista completa dos caracteres especiais que podem ser utilizados nas expressões regulares, com sua respectiva descrição. Para testar os exemplos de expressão regular você pode usar o regExr.

Usando Parênteses

Usar parênteses em volta de qualquer parte de uma expressão regular faz com que essa parte seja lembrada para ser usada depois, como descrito em  Usando as Substrings entre Parênteses na Expressão Regular.

Por Exemplo, a expressão /Capitulo (\d+)\.\d*/ ilustra caracteres adicionais escapados e especiais e indica que parte do padrão deve ser lembrado. Corresponde precisamente aos caracteres ‘Capitulo ‘ seguidos por um ou mais caracteres numéricos (\d significa qualquer caracter numérico e + significa 1 ou mais vezes), seguidos por um ponto decimal (que é um caracter especial; preceder com um \ significa que a expressão regular deve buscar pelo caracter literal ‘.’), seguido por qualquer caracter numérico 0 ou mais vezes (\d significa caracter numérico, * significa 0 ou mais vezes). Além disso, os parenteses são usados para relembrar os primeiros caracteres numéricos correspondentes.

Esse padrão é encontrado em “Abra o capitulo 4.3, parágrafo 6” o ‘4’ é relembrado. O padrão não é encontrado em “Capitulo 3 e 4”, porque essa string não tem um período após o ‘3’.

Para encontrar uma substring sem que a correspondência seja relembrada, dentro dos parênteses inicie o padrão com ?:. Por exemplo, (?:\d+) corresponde a um ou mais caracteres numéricos mas não relembra os caracteres correspondentes.

Trabalhando com expressões regulares

Expressões Regulares são usadas com os metodos  test e exec do objeto RegExp e com os metodos match, replace, search, e split do objeto String. Estes metodos são explicados em detalhe em JavaScript Reference.

Quando você quer saber se um padrão é encontrado em uma string, use o método test ou search; para mais informações (mas execução mais lenta) use o método exec ou match. Se você usar exec ou match e se houver correspondência, estes métodos retornam um array e atualizam as propriedades do objeto da expressão regular associada  e também do objeto da expressão regular predfinada RegExp. Se não houver corespondência, o método exec retorna null (convertido para false).

No seguinte exemplo, o script usa o método exec para encontrar uma correspondência em uma string.

var myRe = /d(b+)d/g;

var myArray = myRe.exec("cdbbdbsbz");

Se você não precisa acessar as propriedades da expressão regular, uma alternativa de criar myArray é com esse script:

var myArray = /d(b+)d/g.exec("cdbbdbsbz");

Se você quiser construir a expressão regular a partir de uma string, outra alternativa é esse script:

var myRe = new RegExp("d(b+)d", "g");

var myArray = myRe.exec("cdbbdbsbz");

Com esses scripts, a correspondência é encontrada o array é retornado e são atualizadas as propriedades mostradas na tabela a seguir.

Como mostrado na segunda forma deste exemplo, você pode usar uma expressão regular criada com um inicializador de objeto sem atribuí-la à uma variável. Contudo, se você o fizer, toda ocorrência é uma nova expressão regular. Assim sendo, se você usar esta forma sem atribuí-la à uma variável, você não pode subsequentemente acessar as propriedades da expressão regular. Assumamos que tenha este script, por exemplo:

var myRe = /d(b+)d/g;

var myArray = myRe.exec("cdbbdbsbz");

console.log("O útltimo índice é " + myRe.lastIndex);

Este script mostra:

O último índice é 5

Contudo, se tem este script:

var myArray = /d(b+)d/g.exec("cdbbdbsbz");

console.log("O último índice é " + /d(b+)d/g.lastIndex);

Ele mostra:

O último índice é 0

As ocorrências de /d(b+)d/g nas duas declarações são objetos expressões regulares diferentes e consequentemente têm diferentes valores para suas propriedades lastIndex. Se precisa acessar as propriedades de uma expressão regular criada com um inicializaor de objeto, você deve primeiro atribuí-la à uma variável.

Usando as Substrings entre Parênteses na Expressão Regular

A inclusão de parênteses em um padrão de expressão regular faz com que a sub-correspondência correspondente seja lembrada. Por exemplo, /a(b)c/ corresponde aos caracteres ‘abc’ e lembra ‘b’. Para recuperar essas correspondências de substring entre parênteses, use o Arra[1], …, [n].

O número de substring entre parênteses possíveis é ilimitado. A matriz retornada contém tudo o que foi encontrado. Os exemplos a seguir ilustram como usar parênteses entre parênteses.

Exemplo 1

O script a seguir usa o método replace() para alternar as palavras na string. Para o texto de substituição, o script usa o $1 e $2 na substituição para indicar a primeira e a segunda correspondências de substring entre parênteses.

var re = /(\w+)\s(\w+)/;

var str = "John Smith";

var newstr = str.replace(re, "$2, $1");

console.log(newstr);

Isto imprime “Smith, John”.

Pesquisa avançada com Flags

As expressões regulares possuem quatro flags opcionais as quais se incluem a pesquisa global e case insensitive. Para realizar uma pesquisa global, utilize a flag g. Para realizar uma pesquisa sem diferenciar letras maiúsculas de minúsculas, utilize a flag i. Para realizar uma pesquisa multi-linhas, utilize a flag m. Ao realizar uma pesquisa “sticky”, o ponto de partida será a posição corrente da string alvo, use com a flag y.Estas flags podem ser usadas separadamente ou juntas, em qualquer ordem, e serão inclusas como parte da expressão regular.

Firefox 3 note

Suporte para o sinalizador y foi adicionado no Firefox 3. 
O sinalizador y falha se a correspondência não for bem-sucedida na posição atual na cadeia de destino.

Para incluir um sinalizador com a expressão regular, use esta sintaxe:

var re = /pattern/flags;

ou

var re = new RegExp("pattern", "flags");

Observe que os sinalizadores são parte integrante de uma expressão regular. Eles não podem ser adicionados ou removidos posteriormente.

Por exemplo, re = /\w+\s/g cria uma expressão regular que procura um ou mais caracteres seguidos por um espaço e procura essa combinação em toda a cadeia.

var re = /\w+\s/g;

var str = "fee fi fo fum";

var myArray = str.match(re);

console.log(myArray);

Isso exibe [“fee “, “fi “, “fo “]. Neste exemplo, você pode substituir a linha

var re = /\w+\s/g;

por:

var re = new RegExp("\\w+\\s", "g");

e obtenha o mesmo resultado.

O sinalizador m é usado para especificar que uma sequência de entrada de múltiplas linhas deve ser tratada como várias linhas. Se o sinalizador m for usado, ^ e $ combinam no início ou no final de qualquer linha na sequência de entrada, em vez do início ou no final de toda a sequência.

Exemplos

Os exemplos que se seguem mostram mais usos expressões regulares.

Alterando o pedido em uma string de entrada

O exemplo a seguir ilustra a formação de expressões regulares e o uso de string.split() e string.replace().  Ela limpa uma string de entrada formatada com nomes (primeiro nome sobrenome) separados por espaço em branco, tabulações  e exatamente um ponto e virgula. Por fim, inverte  a ordem do nome (sobrenome e primeiro nome) e ordena a lista

// A cadeia de nomes contém vários espaços e guias,

// e pode ter vários espaços entre o nome e o sobrenome.

var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";

var output = ["---------- Original String\n", names + "\n"];

// Prepare dois padrões de expressão regular e armazenamento em array.

// Divide a string em elementos da matriz.

// pattern: possível espaço em branco, em seguida, ponto e vírgula, em seguida, possível espaço em branco

var pattern = /\s*;\s*/;

// Quebra string em pedaços separados pelo padrão acima e

// armazene as partes em uma matriz chamada nameList

var nameList = names.split(pattern);

// new pattern: um ou mais caracteres, espaços e caracteres.

// Use parênteses para "memorizar" partes do padrão.

// As partes memorizadas são referenciadas mais tarde.

pattern = /(\w+)\s+(\w+)/;

// Nova matriz para armazenar nomes sendo processados.

var bySurnameList = [];

// Exibe a matriz de nomes e preenche a nova matriz

// com nomes separados por vírgula, último primeiro.

//

// O método replace remove qualquer coisa que corresponda ao padrão

// e substitui-o pela sequência memorizada - segunda parte memorizada

// seguido por espaço de vírgula seguido pela primeira parte memorizada.

//

// As variáveis ​​$ 1 e $ 2 se referem às partes

// memorizado enquanto corresponde ao padrão.

output.push("---------- After Split by Regular Expression");

var i, len;

for (i = 0, len = nameList.length; i < len; i++){

  output.push(nameList[i]);

  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");

}

// Exibe a nova matriz.

output.push("---------- Names Reversed");

for (i = 0, len = bySurnameList.length; i < len; i++){

  output.push(bySurnameList[i]);

}

// Classifica pelo sobrenome e exibe a matriz classificada.

bySurnameList.sort();

output.push("---------- Sorted");

for (i = 0, len = bySurnameList.length; i < len; i++){

  output.push(bySurnameList[i]);

}

output.push("---------- End");

console.log(output.join("\n"));

Usando caracteres especiais para verificar entradas

No exemplo a seguir, é esperado que o usuário informe um número de telefone. Quando o usuário pressionar o botão “Check”, o script verificará a validade do número. Se o número for válido (a sequência de caracteres especificada corresponderá a expressão regular), então, o script exibe uma mensagem agradecendo o usuário e confirmando o seu número. Se o número for inválido, o script informa ao usuário que o número de telefone não é válido.

A expressão regular procura por zero ou uma ocorrência de parênteses de abertura \(?, seguido de três dígitos \d{3}, seguido de zero ou uma ocorrência de parênteses de fechamento \)?, seguido de um hífen, barra ou ponto decimal e, quando encontrado, guarda o caractere ([-\/\.]), seguido de três dígitos \d{3}, seguido por um caractere de hífen, barra ou ponto decimal que fora guardado \1, seguido por quatro dígitos \d{4}.

Com o evento Change ativo, quando o usuário pressionar Enter, o valor será capturado por RegExp.input.

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

      var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;

      function testInfo(phoneInput){

        var OK = re.exec(phoneInput.value);

        if (!OK)

          window.alert(RegExp.input + " Não é um número de telefone com código de área!");

        else

          window.alert("Obrigado, o seu número de telefone é " + OK[0]);

      }

    </script>

  </head>

  <body>

    <p>Informe o seu número de telefone (com código de área) e então clique em "Check".

        <br>O formato esperado é ###-###-####.</p>

    <form action="#">

      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>

    </form>

  </body>

</html>

• « Previous
• Next »