Abordaremos a criação de expressões regulares, ou simplesmente RegExp, utilizando caracteres especiais, grupos, conjuntos, quantificadores, metacaracteres, modificadores e muito mais!
Além disso, vamos explorar também a API de RegExp e também String, falando das operações exec, test, match, split e replace.
2. Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
Formado em Ciências da Computação pela UFSC e
MBA em Gerenciamento de Projetos pela FGV, é
arquiteto de software há mais de 15 anos,
especialista nas linguagens Java e JavaScript. É
também autor do livro AngularJS Essentials e de
diversos artigos da revista Java Magazine. Além disso,
é professor e palestrante, tendo participado da formação de mais de
1.000 desenvolvedores de software e apresentado mais de 100
palestras em eventos no Brasil e no exterior. Fundador da Agile Code,
uma empresa de treinamento e consultoria, atualmente é
apresentador de um canal no YouTube sobre JavaScript, AngularJS e
muito mais!
3. Acompanhe a série Desvendando a linguagem
JavaScript pelo YouTube em:
http://www.youtube.com/rodrigobranas
4. As expressões regulares são estruturas
formadas por uma sequência de caracteres
que especificam um padrão formal
10. RegExp API
exec – Executa a RegExp, retornando os
detalhes
test – Testa a RegExp, retornando true
ou false
11. Telefone – Passo 1
Nosso primeiro exemplo envolve o reconhecimento de
um telefone simples: 9999-9999. Esse telefone será
evoluído por meio de novos cenários para estimular a
utilização de grupos, metacaracteres, quantificadores e
muito mais!
12. Executando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.exec(telefone); // ['9999-9999', index: 0,
input: '9999-9999']
13. Testando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.test(telefone); // true
14. Telefone – Passo 2
Evoluímos nosso primeiro exemplo e agora o telefone
tem código de área: (48) 9999-9999, como fazer para
reconhecê-lo?
15. Testando a expressão regular
1. var regExp = /9999-9999/;
2.
3. var telefone = "9999-9999";
4. regExp.test(telefone); // true
16. Testando a expressão regular
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // false
20. Telefone – Passo 3
Vamos evoluir novamente e agora, no nosso terceiro
exemplo, temos que fazer com que o telefone seja
reconhecido únicamente, não permitindo outros
caracteres antes e depois!
21. Iniciando e finalizando com um
determinado caractere
^ - Inicia com um determinado caractere
$ - Finaliza com um determinado
caractere
22. Lidando com caracteres antes e depois
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "Ligue para (90) 9999-9999, tratar com
João";
4. regExp.test(telefone); // true
23. Lidando com caracteres antes e depois
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "Ligue para (90) 9999-9999, tratar com
João";
4. regExp.test(telefone); // false
24. Lidando com caracteres antes e depois
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // true
25. Telefone – Passo 4
Chegou a hora de aceitar qualquer número de telefone,
para isso precisamos flexibilizar a expressão regular por
meio de grupos.
26. Grupos de caracteres
[abc] – Aceita qualquer caractere
dentro do grupo, nesse caso a, b e c
[^abc] – Não aceita qualquer caractere
dentro do grupo, nesse caso a, b ou c
[0-9] – Aceita qualquer caractere
entre 0 e 9
[^0-9] – Não aceita qualquer caractere
entre 0 e 9
27. Utilizando grupos de caracteres
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // true
28. Utilizando grupos de caracteres
1. var regExp = /^(90) 9999-9999$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // false
29. Utilizando grupos de caracteres
1. var regExp = /^([0-9][0-9]) [0-9][0-9][0-9][0-9]-[0-
9][0-9][0-9][0-9]$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
30. Telefone – Passo 5
Não é muito grupo? Para evitar a repetição exagerada
de padrões em uma expressão regular, podemos
utilizar quantificadores.
31. Quantificadores – Parte 1
Os quantificadores podem ser aplicados a caracteres,
grupos, conjuntos ou metacaracteres.
{n} – Quantifica um número específico
{n,} – Quantifica um número mínimo
{n,m} – Quantifica um número mínimo e
um número máximo
33. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
34. Telefone – Passo 6
E se for necessário aceitar números com 8 ou 9 dígitos?
Podemos utilizar um quantificador para especificar um
determinado intervalo.
35. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 9977-8899";
4. regExp.test(telefone); // true
36. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // false
37. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // true
38. Telefone – Passo 7
E se o hífen for opcional? É muito comum que se
escreva sem hífen! Podemos utilizar um quantificador
para torná-lo opcional.
39. Quantificadores - Parte 2
Os quantificadores podem ser aplicados a caracteres,
grupos, conjuntos ou metacaracteres.
? – Zero ou um
* – Zero ou mais
+ – Um ou mais
40. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 99977-8899";
4. regExp.test(telefone); // true
41. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // false
42. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // true
43. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{4}$/;
2.
3. var telefone = "(80) 999778899";
4. regExp.test(telefone); // true
44. Telefone – Passo 8
E se o telefone agora estiver em uma estrutura de
tabela, como fazer para reconhecer cada linha?
49. Telefone – Passo 9
Em muitos casos, é possível substituir os grupos por
metacaracteres específicos!
50. Metacaracteres
. – Representa qualquer caractere
w – Representa o conjunto [a-zA-Z0-9_]
W – Representa o conjunto [^a-zA-Z0-9_]
d – Representa o conjunto [0-9]
D – Representa o conjunto [^0-9]
s – Representa um espaço em branco
S – Representa um não espaço em branco
n – Representa uma quebra de linha
t – Representa um tab
54. String API
match – Executa uma busca na String e retorna
um array contendo os dados encontrados, ou
null.
split – Divide a String com base em uma outra
String fixa ou expressão regular.
replace – Substitui partes da String com bae
em uma outra String fixa ou expressão regular.
55. Telefone – Passo 10
Chegou a hora de extrair os telefones das linhas da
tabela! Vamos extrair o telefone da primeira linha.
56. Extraindo dados com match
1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}-
?d{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // null
57. Extraindo dados com match
1. var regExp = /<table><tr>(<td>(d{2})sd{4,5}-
?d{4}</td>)+</tr></table>/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // null
58. Extraindo dados com match
1. var regExp = /(d{2})sd{4,5}-?d{4}/;
2.
3. var telefone = "<table>
4. <tr>
5. <td>(80) 999778899</td>
6. <td>(90) 99897-8877</td>
7. <td>(70) 98767-9999</td>
8. </tr>
9. </table>";
10. telefone.match(regExp); // '(80) 999778899'
59. Telefone – Passo 11
Agora, vamos extrair o telefone de todas as linhas.