Regular expressions – my secret love

Slide 1

Slide 1 text

@stefanjudis Regular expressions – my secret love...

Slide 2

Slide 2 text

... and things I'm excited about.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

/^(?: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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

/^(?: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

Slide 26

Slide 26 text

/^(?: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?" } ]

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

/^(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?" } ]

Slide 31

Slide 31 text

/^(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

Slide 32

Slide 32 text

/^(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?" } ]

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

/^(?: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?" } ]

Slide 37

Slide 37 text

/^(?: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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

/^(?: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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

/^(?: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?" } ]

Slide 51

Slide 51 text

/^(?: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?" } ]

Slide 52

Slide 52 text

/^(?: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?" } ]

Slide 53

Slide 53 text

/^(?: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!

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

@stefanjudis www.stefanjudis.com Thanks.