Rodrigo Branas, especialista em Java e JavaScript, explora expressões regulares em JavaScript para validação e extração de dados. O documento abrange a criação, teste e aplicação de expressões regulares em diferentes contextos, como números de telefone, utilizando quantificadores e metacaracteres. Além disso, apresenta exemplos práticos e técnicas para simplificar padrões por meio de grupos e quantificadores.

1. JavaScript - Expressões Regulares
Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br

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

5. Validação de campos

6. Extração de dados

7. Substituição de caracteres em textos

8. Criando uma expressão regular
1. var regExp = /<expressão regular>/;

9. Criando uma expressão regular
1. var regExp = new RegExp("<expressão regular>");

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

17. Escapando caracteres especiais
- A barra é utilizada antes de
caracteres especiais, com o objetivo de
escapá-los.

18. Escapando caracteres especiais
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // false

19. Escapando caracteres especiais
1. var regExp = /(90) 9999-9999/;
2.
3. var telefone = "(90) 9999-9999";
4. regExp.test(telefone); // true

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

32. Utilizando quantificadores
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

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?

45. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{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. regExp.test(telefone); // false

46. Utilizando quantificadores
1. var regExp = /^([0-9]{2}) [0-9]{4,5}-?[0-9]{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. regExp.test(telefone); // false

47. Utilizando quantificadores
1. var regExp = /([0-9]{2}) [0-9]{4,5}-?[0-9]{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. regExp.test(telefone); // false

48. Utilizando quantificadores
1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}-
?[0-9]{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. regExp.test(telefone); // true

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

51. Utilizando metacaracteres
1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}-
?[0-9]{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. regExp.test(telefone); // true

52. Utilizando metacaracteres
1. var regExp = /<table><tr>(<td>([0-9]{2}) [0-9]{4,5}-
?[0-9]{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. regExp.test(telefone); // true

53. Utilizando metacaracteres
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. regExp.test(telefone); // true

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.

60. Modificadores
i – Case-insensitive matching
g – Global matching
m – Multiline matching

61. 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'

62. Extraindo dados com match
1. var regExp = /(d{2})sd{4,5}-?d{4}/g;
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', '(90)
99897-8877', '(70) 98767-9999']

63. Extraindo dados com match
1. var regExp = /(d{2})sd{4,5}-?d{4}/g;
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', '(90)
99897-8877', '(70) 98767-9999']

64. Extraindo dados com match
1. var regExp = /(d{2}) /g;
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)', '(90)', '(70)']

65. Extraindo dados com match
1. var regExp = /d{4,5}-?d{4}/g;
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); // ['999778899', '99897-
8877', '98767-9999']

66. Telefone – Passo 12
Por fim, vamos substituir todos os telefones da tabela!

67. Substituindo dados com replace
1. var regExp = /(d{2})sd{4,5}-?d{4}/g;
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.replace(regExp, "telefone"); // <table><tr>
11. <td>telefone</td><td>telefone</td><td>telefone...