O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

JavaScript - Expressões Regulares

2.445 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

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

×