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 RegExp
que 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 RegExp
construtor:
let re = new RegExp('hi');
Linguagem de código: JavaScript ( javascript )
Ambas as expressões regulares são instâncias do RegExp
tipo. Eles correspondem à string 'hi'
.
Testando para correspondência
O RegExp
objeto 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 true
se 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); // true
Linguagem de código: JavaScript ( javascript )
Usando sinalizadores de padrão
Além de um padrão, um RegExp
objeto 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 i
sinalização ignora casos durante a pesquisa. A letra i
significa ignore
.
Por padrão, as pesquisas diferenciam maiúsculas de minúsculas. Por exemplo /hi/
, corresponde apenas à string hi
not Hi
. Para procurar uma string hi
em qualquer caso, você usa o i
sinalizador:
let re = /hi/i;
let result = re.test('Hi John');
console.log(result); // true
Linguagem de código: JavaScript ( javascript )
Neste exemplo, o /hi/i
corresponderá a qualquer string hi
, Hi
e HI
. Observe que você coloca o sinalizador i
após o último caractere de barra ( /
)
O exemplo a seguir mostra como usar o sinalizador no RegExp
construtor:
let re = new RegExp('hi','i');
let result = re.test('HI John');
console.log(result); // true
Linguagem de código: JavaScript ( javascript )
2) A bandeira global ( g
)
Outro sinalizador comumente usado é o sinalizador global ( g
). Sem o sinalizador global, o RegExp
objeto apenas verifica se há uma correspondência em uma string e retorna a primeira correspondência.
Quando a g
flag está disponível, RegExp
procura todas as correspondências e retorna todas elas.
É possível combinar sinalizadores, por exemplo, gi
sinalizadores combinam os sinalizadores ignore ( i
) e global ( g
).
O exec()
método de RegExp
realiza 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 null
se 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...while
loop 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
message
string 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 quere
o objeto ignore casos ao executar a pesquisa e o sinalizador global (g
) instrui ore
objeto 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 regexp
na 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 OK
Linguagem 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 OK
independentemente 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
/.../
ouRegExp
construtor 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.