Regular expressions – my secret love

Transcript

1. @stefanjudis
   Regular expressions –
   my secret love...
   

   View Slide

2. ... and things
   I'm excited about.
   

   View Slide

3. /^(Hello|Bonjour) dotJS!(.+)$/
   Match a string that...
   

   View Slide

4. /^(Hello|Bonjour) dotJS!(.+)$/
   Match a string that
   starts with...
   

   View Slide

5. /^(Hello|Bonjour) dotJS!(.+)$/
   Match a string that
   starts with "Hello" or "Bonjour"...
   

   View Slide

6. /^(Hello|Bonjour) dotJS!(.+)$/
   Match a string that
   starts with "Hello" or "Bonjour"
   followed by " dotJS!"...
   

   View Slide

7. /^(Hello|Bonjour) dotJS!(.+)$/
   Match a string that
   starts with "Hello" or "Bonjour"
   followed by " dotJS!",
   capture more than one character...
   

   View Slide

8. /^(Hello|Bonjour) dotJS!(.+)$/
   Match a string that
   starts with "Hello" or "Bonjour"
   followed by " dotJS!",
   capture more than one character
   until the end.
   

   View Slide

9. /^(Hello|Bonjour) dotJS!(.+)$/
   .exec(
   "Hello dotJS? How are you?"
   )
   

   View Slide

10. /^(Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS? How are you?"
    )
    null
    

    View Slide

11. /^(Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS? How are you?"
    )
    null
    

    View Slide

12. /^(Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    

    View Slide

13. /^(Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: "Hello",
    2: " How are you?"
    ]
    

    View Slide

14. /^(Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: "Hello",
    2: " How are you doing?"
    ]
    

    View Slide

15. /^(Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: "Hello",
    2: " How are you?"
    ]
    

    View Slide

16. /^(Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: "Hello",
    2: " How are you?"
    ]
    

    View Slide

17. /^(Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: "Hello",
    2: " How are you?"
    ]
    

    View Slide

18. /^(?:Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    

    View Slide

19. /^(?:Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: " How are you?"
    ]
    

    View Slide

20. /^(?:Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: " How are you?"
    ]
    (?: ...) – there are
    non-capturing groups in
    JavaScript
    

    View Slide

21. /^(?:Hello|Bonjour) dotJS!(.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: " How are you?"
    ]
    

    View Slide

22. /^(?:Hello|Bonjour) dotJS!(?.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    

    View Slide

23. /^(?:Hello|Bonjour) dotJS!(?.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: " How are you?",
    groups: { rest: " How are you?" }
    ]
    

    View Slide

24. /^(?:Hello|Bonjour) dotJS!(?.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: " How are you?",
    groups: { rest: " How are you?" }
    ]
    

    View Slide

25. /^(?:Hello|Bonjour) dotJS!(?.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you doing?",
    1: " How are you doing?",
    groups: { rest: " How are you?" }
    ]
    (? ...) – there
    are named capture groups
    in JavaScript
    

    View Slide

26. /^(?:Hello|Bonjour) dotJS!(?.+)$/
    .exec(
    "Hello dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: " How are you doing?",
    groups: { rest: " How are you?" }
    ]
    

    View Slide

27. /^(Bonjour) \1 dotJS!(?.+)$/
    .exec(
    "Bonjour dotJS! How are you?"
    )
    

    View Slide

28. /^(Bonjour) \1 dotJS!(?.+)$/
    .exec(
    "Bonjour dotJS! How are you?"
    )
    null
    

    View Slide

29. /^(Bonjour) \1 dotJS!(?.+)$/
    .exec(
    "Bonjour Bonjour dotJS! How are you?"
    )
    

    View Slide

30. /^(Bonjour) \1 dotJS!(?.+)$/
    .exec(
    "Bonjour Bonjour dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: "Bonjour"
    2: " How are you?",
    groups: { rest: " How are you?" }
    ]
    

    View Slide

31. /^(Bonjour) \1 dotJS!(?.+)$/
    .exec(
    "Bonjour Bonjour dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you doing?",
    1: "Bonjour"
    2: " How are you?",
    groups: { rest: " How are you?" }
    ]
    \1, \2, ... – there
    are capture group back
    references in JavaScript
    

    View Slide

32. /^(Bonjour) \1 dotJS!(?.+)$/
    .exec(
    "Bonjour Bonjour dotJS! How are you?"
    )
    [
    0: "Hello dotJS! How are you?",
    1: "Bonjour"
    2: " How are you?",
    groups: { rest: " How are you?" }
    ]
    

    View Slide

33. /^(?:Bonjour) dotJS!(?.+) \k$/
    .exec(
    "Bonjour dotJS! How are you?"
    )
    

    View Slide

34. /^(?:Bonjour) dotJS!(?.+) \k$/
    .exec(
    "Bonjour dotJS! How are you?"
    )
    null
    

    View Slide

35. /^(?:Bonjour) dotJS!(?.+) \k$/
    .exec(
    "Bonjour dotJS! How are you? How are you?"
    )
    

    View Slide

36. /^(?:Bonjour) dotJS!(?.+) \k$/
    .exec(
    "Bonjour dotJS! How are you? How are you?"
    )
    [
    0: "Bonjour dotJS! How are you? How are you?",
    1: " How are you?",
    groups: { rest: " How are you?" }
    ]
    

    View Slide

37. /^(?:Bonjour) dotJS!(?.+) \k$/
    .exec(
    "Bonjour dotJS! How are you? How are you?"
    )
    [
    0: "Bonjour dotJS! How are you? How are you?",
    1: " How are you?",
    groups: { rest: " How are you?" }
    ]
    \k – there are
    named capture group back
    references in JavaScript
    

    View Slide

38. /^(?:Bonjour) dotJS!(?.+) \k$/
    .exec(
    "Bonjour dotJS! How are you? How are you?"
    )
    

    View Slide

39. /^(?:Bonjour) dotJS!(?.+)$/
    .exec(
    "Bonjour dotJS! How are you?"
    )
    

    View Slide

40. /^(?:Bonjour) dotJS!(?.+)$/
    .exec(
    "Bonjour dotJS! How are you?"
    )
    [
    0: "Bonjour dotJS! How are you?",
    1: " How are you?",
    groups: { rest: " How are you?" }
    ]
    

    View Slide

41. /^(?:Bonjour) dotJS!(?.+)$/
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    

    View Slide

42. /^(?:Bonjour) dotJS!(?.+)$/
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    null
    

    View Slide

43. /^(?:Bonjour) dotJS!(?.+)$/s
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    

    View Slide

44. /^(?:Bonjour) dotJS!(?.+)$/s
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    [
    0: "Bonjour dotJS! How are↵you?",
    1: " How are↵you?",
    groups: { rest: " How are↵you?" }
    ]
    

    View Slide

45. /^(?:Bonjour) dotJS!(?.+)$/s
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    [
    0: "Bonjour dotJS! How are↵you?",
    1: " How are↵you?",
    groups: { rest: " How are↵you?" }
    ]
    / .../s – the dotall flag
    really captures
    every character
    

    View Slide

46. /^(?:Bonjour) dotJS!(?.+)$/s
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    

    View Slide

47. /^(?:Bonjour) dotJS!(?.+)\p{Emoji}$/su
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    

    View Slide

48. /^(?:Bonjour) dotJS!(?.+)\p{Emoji}$/su
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    null
    

    View Slide

49. /^(?:Bonjour) dotJS!(?.+)\p{Emoji}$/su
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    

    View Slide

50. /^(?:Bonjour) dotJS!(?.+)\p{Emoji}$/su
    .exec(
    "Bonjour dotJS! How are\nyou?"
    )
    [
    0: "Bonjour dotJS! How are↵you?",
    1: " How are↵you?",
    groups: { rest: " How are↵you?" }
    ]
    

    View Slide

51. /^(?:Bonjour) dotJS!(?.+)\p{Math_Symbol}$/su
    .exec(
    "Bonjour dotJS! How are\nyou?⁼"
    )
    [
    0: "Bonjour dotJS! How are↵you⁼?",
    1: " How are↵you?",
    groups: { rest: " How are↵you?" }
    ]
    

    View Slide

52. /^(?:Bonjour) dotJS!(?.+)\p{Script=Greek}$/su
    .exec(
    "Bonjour dotJS! How are\nyou?μ"
    )
    [
    0: "Bonjour dotJS! How are↵youμ?",
    1: " How are↵you?",
    groups: { rest: " How are↵you?" }
    ]
    

    View Slide

53. /^(?:Bonjour) dotJS!(?.+)\p{Script=Greek}$/su
    .exec(
    "Bonjour dotJS! How are\nyou?μ"
    )
    [
    0: "Bonjour dotJS! How are↵youμ?",
    1: " How are↵you?",
    groups: { rest: " How are↵you?" }
    ]
    p/{ ...} – unicode
    property escapes are a
    thing these days!
    

    View Slide

54. Other exciting "new"
    features to check out
    lookahead and lookbehind assertions
    

    View Slide

55. Other exciting "new"
    features to check out
    lookahead and lookbehind assertions
    String.prototype.matchAll
    

    View Slide

56. Other exciting "new"
    features to check out
    lookahead and lookbehind assertions
    String.prototype.matchAll
    string replacement patterns
    

    View Slide

57. @stefanjudis
    www.stefanjudis.com
    Thanks.
    

    View Slide