Expressões regulares em JavaScript
Uma expressão regular (ou regex) é uma sequência de carateres que podemos usar para atingir e manipular determinados elementos em strings. Assim, podemos:
-
Procurar um texto numa string
-
Substituir substrings numa string
-
Extrair informação de uma string
💡 A variante de regex do JavaScript faz parte da norma ECMA-262 para a linguagem. Isto significa que não tens de te preocupar com a compatibilidade específica de cada navegador.
Como criar expressões regulares
Em JavaScript, uma expressão regular escreve-se geralmente 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]');
Em ambos os casos, o JavaScript cria um objeto a partir da regex. Recomenda-se usar padrões imutáveis, com o literal por predefinição.
O construtor RegExp pode ser usado nos casos em que a regex vai mudar ou ainda não a conhecemos (como um valor de entrada).
🏴☠️ Flags
As expressões regulares têm superpoderes opcionais chamados flags que permitem funcionalidades adicionais.
Algumas das mais usadas são:
-
/g - Pesquisa global
-
/i - Não distinguir maiúsculas de minúsculas
-
/m - Pesquisa multilinha
Eis um exemplo simples:
const re = /home/gi;
const str = 'Home, sweet home.';
const myArray = str.match(re);
console.log(myArray);
=> // ["Home", "home"]
O caráter g permite-nos analisar todas as correspondências possíveis numa string. Sem esta funcionalidade, o JavaScript teria extraído apenas a primeira correspondência Home.
A flag de não distinguir maiúsculas de minúsculas /i torna-nos flexíveis na procura de 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)
Funções mais comuns
Quando as expressões regulares se combinam com as funções incorporadas do JavaScript, temos formas poderosas de manipular e obter dados a partir de strings.
Estas são algumas das funções mais comuns usadas em conjunto com expressões regulares.
Test
O método test() executa uma procura de correspondência entre uma expressão regular e uma string especificada. Devolve 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.
Desta forma, conseguimos tanto procurar como extrair informação 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 pesquisa global /g está presente, em vez de obtermos apenas a correspondência única com informação útil como o index ou o input, o método devolve todas as ocorrências apresentadas 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-nos procurar um valor numa string e substituí-lo pelo novo valor pretendido.
string.replace(searchValue, newValue);
O padrão para procurar a 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 a 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.
Desta forma, vamos usar expressões regulares para dividir uma string dada, reconhecendo um padrão, por exemplo str.split(/[,.\s]/). Este padrão será usado como 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
