Find your perfect match with regular expressions

Regex is hard. Here are 4 (maybe 5) quick tips and lesser known features to write good looking and readable regular expressions.

These slides are from a 4 minute lightning talk at FullStack Europe 2019. Sorry for any duplicate slides. Keynote has a hard time exporting the animations to PDF.

Transcript

1. @alexvanderbist Find your perfect match with regex @alexvanderbist
2. @alexvanderbist Alex Vanderbist
3. @alexvanderbist full-stack developer
4. @alexvanderbist
5. @alexvanderbist full-stack developer
6. @alexvanderbist
7. @alexvanderbist regular expressions
8. @alexvanderbist stupid
9. @alexvanderbist stupendous
10. @alexvanderbist stup endous id / ( | / )
11. @alexvanderbist 20 seconds into the talk
12. @alexvanderbist follow me @alexvanderbist
13. @alexvanderbist
14. @alexvanderbist
15. @alexvanderbist
16. @alexvanderbist 1. /^X\w{3}/.test(name) 2. name[0] === 'X' && name.length === 4
17. @alexvanderbist –Some guy, probably “If all you have is a hammer, every problem looks like a nail.”
18. @alexvanderbist Writing readable regular expressions
19. @alexvanderbist So what's wrong with regex?
20. @alexvanderbist Sowhat'swrongwithregex?
21. @alexvanderbist Swht'swrngwthrgx?
22. @alexvanderbist swhtswrngwthrgx
23. @alexvanderbist swhtswrngwthrgx / /
24. @alexvanderbist ^#[a-fA-F0–9]{6}$
25. @alexvanderbist ^#(?:[a-fA-F0–9]{6}|[a- fA-F0–9]{3})$
26. @alexvanderbist X
27. @alexvanderbist X the flag
28. @alexvanderbist /^\#(?:[a-fA-F0-9]{6} [a-fA-F0-9]{3} | )$/x
29. @alexvanderbist /^ \# (?: [a-fA-F0-9]{6} [a-fA-F0-9]{3} | ) $/x
30. @alexvanderbist /^ # match h \# # literal (?: [a-fA-F0–9]{6} # 6 chara | # or [a-fA-F0–9]{3} # 3 chara ) $/x
31. @alexvanderbist /^ # match hex color \# # literal hashtag (?: [a-fA-F0–9]{6} # 6 character hex | # or [a-fA-F0–9]{3} # 3 character hex ) $/x
32. @alexvanderbist /http:\/\//
33. @alexvanderbist http:\/\/ / + % / + %
34. @alexvanderbist http:\/\/ [ < # ] > #
35. @alexvanderbist #http: \/\/#
36. @alexvanderbist #http: //#
37. @alexvanderbist Named capture groups
38. @alexvanderbist Named capture groups / (\d{4})- (\d{2})- (\d{2}) /x 2015-05-09
39. @alexvanderbist Named capture groups / (\d{4})- (\d{2})- (\d{2}) /x 2015-05-09
40. @alexvanderbist Named capture groups / (\d{4})- (\d{2})- (\d{2}) /x 2015-05-09
41. @alexvanderbist Named capture groups / (?<year>\d{4})- (?<month>\d{2})- (?<day>\d{2}) /x
42. @alexvanderbist const regex = /(?<year>\d{4})-(? <month>\d{2})-(?<day>\d{2})/; const matches = regex.exec('1996-02-05'); console.log(matches.groups.year); // 1996
43. @alexvanderbist const regex = /(?<year>\d{4})-(? <month>\d{2})-(?<day>\d{2})/; const matches = regex.exec('1996-02-05'); console.log(matches.groups.year); // 1996
44. @alexvanderbist Sub-routine definitions basically named capture groups again
45. @alexvanderbist / (?(DEFINE) (?<year>\d{4}) (?<month>\d{2}) (?<day>\d{2}) ) (?&year)-(?&month)-(?&day) /x
46. @alexvanderbist / (?(DEFINE) (?<year>\d{4}) (?<month>\d{2}) (?<day>\d{2}) ) (?&year)-(?&month)-(?&day) /x
47. @alexvanderbist Surviving regex
48. @alexvanderbist Surviving regex 1. Consider not using regular expressions
49. @alexvanderbist Surviving regex 1. Consider not using regular expressions 2. Use extended mode (x-flag)
50. @alexvanderbist Surviving regex 1. Consider not using regular expressions 2. Use extended mode (x-flag) 3. Name your capture groups
51. @alexvanderbist Surviving regex 1. Consider not using regular expressions 2. Use extended mode (x-flag) 3. Name your capture groups 4. Sub-routine definitions when necessary
52. @alexvanderbist