Expressão Regular JavaScript

Resumo : neste tutorial, você aprenderá sobre as expressões regulares JavaScript. Após o tutorial, você saberá como usar expressões regulares de maneira eficaz para pesquisar e substituir strings.

Introdução às expressões regulares em JavaScript

Uma expressão regular é uma string que descreve um padrão, por exemplo, endereços de e-mail e números de telefone.

Em JavaScript, expressões regulares são objetos. JavaScript fornece o tipo integrado RegExpque permite trabalhar com expressões regulares de maneira eficaz.

Expressões regulares são úteis para pesquisar e substituir strings que correspondam a um padrão. Eles têm muitas aplicações úteis.

Por exemplo, você pode usar expressões regulares para extrair informações úteis em web scraping, como preços de produtos. Ou você pode usar expressões regulares para validar campos de formulário como endereços de e-mail e números de telefone.

Criando uma expressão regular

Para criar uma expressão regular em JavaScript, você coloca seu padrão entre caracteres de barra ( /) assim:

let re = /hi/;Linguagem de código:  JavaScript  ( javascript )

Observe que uma expressão regular não possui aspas simples ou duplas como uma string regular.

Ou você pode usar o RegExpconstrutor:

let re = new RegExp('hi');Linguagem de código:  JavaScript  ( javascript )

Ambas as expressões regulares são instâncias do RegExptipo. Eles correspondem à string 'hi'.

Testando para correspondência

O RegExpobjeto possui muitos métodos úteis. Um deles é o test()método que permite testar se uma string contém uma correspondência do padrão na expressão regular.

O test()método retorna truese o argumento string contiver uma correspondência.

O exemplo a seguir usa o test()método para testar se a string 'hi John'corresponde ao padrão hi:

let re = /hi/;
let result = re.test('hi John');

console.log(result); // trueLinguagem de código:  JavaScript  ( javascript )

Usando sinalizadores de padrão

Além de um padrão, um RegExpobjeto também aceita um parâmetro de flag opcional. Sinalizadores são configurações que alteram o comportamento de pesquisa. Expressões regulares têm muitos sinalizadores.

1) O sinalizador de ignorar ( i)

A isinalização ignora casos durante a pesquisa. A letra isignifica ignore.

Por padrão, as pesquisas diferenciam maiúsculas de minúsculas. Por exemplo /hi/, corresponde apenas à string hinot Hi. Para procurar uma string hiem qualquer caso, você usa o isinalizador:

let re = /hi/i;
let result = re.test('Hi John');

console.log(result); // trueLinguagem de código:  JavaScript  ( javascript )

Neste exemplo, o /hi/icorresponderá a qualquer string hi, Hie HI. Observe que você coloca o sinalizador iapós o último caractere de barra ( /)

O exemplo a seguir mostra como usar o sinalizador no RegExpconstrutor:

let re = new RegExp('hi','i');
let result = re.test('HI John');

console.log(result); // trueLinguagem de código:  JavaScript  ( javascript )

2) A bandeira global ( g)

Outro sinalizador comumente usado é o sinalizador global ( g). Sem o sinalizador global, o RegExpobjeto apenas verifica se há uma correspondência em uma string e retorna a primeira correspondência.

Quando a gflag está disponível, RegExpprocura todas as correspondências e retorna todas elas.

É possível combinar sinalizadores, por exemplo, gisinalizadores combinam os sinalizadores ignore ( i) e global ( g).

O exec()método de RegExprealiza uma busca por uma correspondência em uma string e retorna um array que contém informações detalhadas sobre a correspondência.

O exec()método retorna nullse não encontrar nenhuma correspondência. No entanto, ele retorna uma única correspondência de uma só vez. Para obter todas as correspondências, você precisa executar exec()várias vezes.

O exemplo a seguir usa o exec()método com um do...whileloop para retornar todas as correspondências:

let message = 'Hi, are you there? hi, HI...';
let re = /hi/gi;

let matches = [];
let match;
do {
    match = re.exec(message);
    if(match) {
      matches.push(match);
    }
} while(match != null)

console.dir(matches);Linguagem de código:  JavaScript  ( javascript )

Saída:

Como funciona:

• Primeiro, declare uma messagestring que será usada para pesquisa.
• Em seguida, crie um objeto de expressão regular com o padrão /hi/gi. O sinalizador de ignorar ( i) permite que reo objeto ignore casos ao executar a pesquisa e o sinalizador global ( g) instrui o reobjeto a encontrar todas as correspondências, não apenas a primeira.
• Terceiro, execute o exec()método até que nenhuma correspondência seja encontrada.
• Finalmente, mostre a matriz de resultados no console.

Procurando strings

O método str.match(regexp)retorna todas as correspondências regexpna string str.

Para encontrar todas as correspondências, você usa o sinalizador global ( g). E para encontrar as correspondências independentemente dos casos, você usa o sinalizador ignorar ( i).

O exemplo a seguir mostra como usar o match()método:

let str = "Are you Ok? Yes, I'm OK";
let result = str.match(/OK/gi);

console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

["Ok", "OK"]Linguagem de código:  JavaScript  ( javascript )

Substituindo cordas

O exemplo a seguir usa o replace()método para substituir a primeira ocorrência da string 'Ok'na string str:

let str = "Are you OK? Yes, I'm OK.";
let result = str.replace('Ok','fine');

console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

Are you fine? Yes, I'm OKLinguagem de código:  JavaScript  ( javascript )

Para substituir todas as ocorrências de OK, você usa uma expressão regular com o sinalizador global ( g):

let str = "Are you OK? Yes, I'm OK.";
let result = str.replace(/OK/g,'fine');

console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

Are you fine? Yes, I'm fine.Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir usa sinalizadores ignorar e globais para substituir todas as ocorrências de OKindependentemente dos casos pela string fine:

let str = "Are you Ok? Yes, I'm OK.";
let result = str.replace(/OK/gi,'fine');

console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

Are you fine? Yes, I'm fine.Linguagem de código:  JavaScript  ( javascript )

Resumo

• Use /.../ou RegExpconstrutor para criar uma expressão regular.
• Use o sinalizador padrão, por exemplo, ignore( i) e global( g) para modificar o comportamento de correspondência.
• Use o RegExp.test()método para determinar se um padrão é encontrado em uma string.
• Use o RegExp.exec()método para encontrar a correspondência e retornar uma matriz que contém as informações da correspondência.