JavaScript - Expressões Regulares

1.907 visualizações

Publicada em

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.

Publicada em: Tecnologia
1 comentário
20 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.907
No SlideShare
0
A partir de incorporações
0
Número de incorporações
94
Ações
Compartilhamentos
0
Downloads
0
Comentários
1
Gostaram
20
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Desmotivação
  • Desmotivado
  • Desmotivado
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • JavaScript - Expressões Regulares

    1. 1. JavaScript - Expressões Regulares Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
    2. 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. 3. Acompanhe a série Desvendando a linguagem JavaScript pelo YouTube em: http://www.youtube.com/rodrigobranas
    4. 4. As expressões regulares são estruturas formadas por uma sequência de caracteres que especificam um padrão formal
    5. 5. Validação de campos
    6. 6. Extração de dados
    7. 7. Substituição de caracteres em textos
    8. 8. Criando uma expressão regular 1. var regExp = /<expressão regular>/;
    9. 9. Criando uma expressão regular 1. var regExp = new RegExp("<expressão regular>");
    10. 10. RegExp API exec – Executa a RegExp, retornando os detalhes test – Testa a RegExp, retornando true ou false
    11. 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. 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. 13. Testando a expressão regular 1. var regExp = /9999-9999/; 2. 3. var telefone = "9999-9999"; 4. regExp.test(telefone); // true
    14. 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. 15. Testando a expressão regular 1. var regExp = /9999-9999/; 2. 3. var telefone = "9999-9999"; 4. regExp.test(telefone); // true
    16. 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. 17. Escapando caracteres especiais - A barra é utilizada antes de caracteres especiais, com o objetivo de escapá-los.
    18. 18. Escapando caracteres especiais 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // false
    19. 19. Escapando caracteres especiais 1. var regExp = /(90) 9999-9999/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // true
    20. 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. 21. Iniciando e finalizando com um determinado caractere ^ - Inicia com um determinado caractere $ - Finaliza com um determinado caractere
    22. 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. 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. 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. 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. 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. 27. Utilizando grupos de caracteres 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "(90) 9999-9999"; 4. regExp.test(telefone); // true
    28. 28. Utilizando grupos de caracteres 1. var regExp = /^(90) 9999-9999$/; 2. 3. var telefone = "(80) 9977-8899"; 4. regExp.test(telefone); // false
    29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 44. Telefone – Passo 8 E se o telefone agora estiver em uma estrutura de tabela, como fazer para reconhecer cada linha?
    45. 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. 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. 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. 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. 49. Telefone – Passo 9 Em muitos casos, é possível substituir os grupos por metacaracteres específicos!
    50. 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. 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. 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. 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. 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. 55. Telefone – Passo 10 Chegou a hora de extrair os telefones das linhas da tabela! Vamos extrair o telefone da primeira linha.
    56. 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. 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. 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. 59. Telefone – Passo 11 Agora, vamos extrair o telefone de todas as linhas.
    60. 60. Modificadores i – Case-insensitive matching g – Global matching m – Multiline matching
    61. 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. 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. 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. 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. 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. 66. Telefone – Passo 12 Por fim, vamos substituir todos os telefones da tabela!
    67. 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...

    ×