Expressões regulares em JavaScript
Uma expressão regular (ou regex) é uma sequência de caracteres que podemos usar para localizar e manipular certos elementos em strings. Com ela, podemos:
-
Buscar um texto em uma string
-
Substituir substrings em uma string
-
Extrair informações de uma string
💡 A variante de regex do JavaScript faz parte do padrão ECMA-262 da linguagem. Isso significa que você não precisa se preocupar com compatibilidade específica de cada navegador.
Como criar expressões regulares
Em JavaScript, uma expressão regular geralmente é escrita no formato /pattern/modifiers.
Temos duas formas de criar uma expressão regular:
-
Literal de expressão regular:
const regex = /[a-z]/;
- Construtor RegExp:
const regex = new RegExp('[a-z]');
Nos dois casos, o JavaScript cria um objeto a partir da regex. Recomenda-se usar padrões imutáveis, com o literal como padrão.
O construtor RegExp pode ser usado em casos em que a regex vai mudar ou ainda não a conhecemos (como uma entrada).
🏴☠️ Flags
As expressões regulares têm superpoderes opcionais chamados flags, que permitem recursos adicionais.
Algumas das mais usadas são:
-
/g - Busca global
-
/i - Sem distinção entre maiúsculas e minúsculas
-
/m - Busca multilinha
Veja um exemplo simples:
const re = /home/gi;
const str = 'Home, sweet home.';
const myArray = str.match(re);
console.log(myArray);
=> // ["Home", "home"]
O caractere g permite encontrar todas as correspondências possíveis dentro de uma string. Sem esse recurso, o JavaScript extrairia apenas a primeira correspondência de Home.
A flag de distinção entre maiúsculas e minúsculas /i nos dá flexibilidade na hora de encontrar um padrão. Assim, não importa se o que procuramos está em UPPERCASE ou lowercase.
Ao usar o construtor RegExp, a sintaxe para adicionar flags é diferente.
let regex = /[a-z]/gi; // literal notation
let regex = new RegExp('[a-z]', 'gi'); // constructor with string pattern as first argument
let regex = new RegExp(/[a-z]/, 'gi'); // constructor with regular expression literal as first argument (Starting with ECMAScript 6)
As funções mais comuns
Quando as expressões regulares se combinam com as funções nativas atuais do JavaScript, ganhamos formas poderosas de manipular e extrair dados de strings.
Estas são algumas das funções mais comuns usadas junto com regex.
Test
O método test() executa uma busca por uma correspondência entre uma expressão regular e uma string especificada. Retorna true ou false.
const str = 'It is difficult to test if you have a virus';
const result = /virus$/.test(str);
console.log(result);
// => true
Match
Com o método match(), obtemos um array útil cujo conteúdo depende da presença ou ausência das correspondências encontradas.
Assim, somos capazes tanto de buscar quanto de extrair informações de qualquer string. Por exemplo:
const funnyQuote =
'If you see someone crying, ask if it is because of their haircut.';
const regex1 = /someone/;
const regex2 = /happy/;
funnyQuote.match(regex1);
// => ["someone", index: 11, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]
funnyQuote.match(regex2);
// => null
Quando a flag de busca global /g está presente, em vez de obter apenas a correspondência junto com informações úteis como o índice ou a entrada, o método retorna todas as ocorrências exibidas no array:
const funnyQuote =
'If you see someone crying, ask if it is because of their haircut.';
const regex3 = /if/gi;
funnyQuote.match(regex3);
// => ["If", "if"];
Replace
O método replace() em JavaScript permite buscar um valor dentro de uma string e substituí-lo por um novo valor desejado.
string.replace(searchValue, newValue);
O padrão usado na busca pela substituição pode ser uma única string ou uma expressão regular.
let string = 'I like dogs!';
let result = string.replace('dogs', 'cats');
let string = 'I would love to travel to Japan';
let result = string.replace(/Japan/g, 'Hawaii');
Além disso, podemos aplicar uma função na posição de substituição para fazer alterações adicionais em cada valor.
let text = 'Say hello to the chatbot.';
let result = text.replace(/chatbot|hello/gi, function (word) {
return word.toUpperCase();
});
// => "Say HELLO to the CHATBOT"
Split
O método split() em JavaScript representa uma forma diferente de usar e manipular strings com expressões regulares.
Assim, usaremos regex para dividir uma string reconhecendo um padrão, por exemplo str.split(/[,.\s]/). Esse padrão será usado como o separator.
const str = 'hello,user.how are.you';
const result = str.split(/[,.\s]/);
console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']
Exercício de aprendizagem
