Demystifying the Wizardry of Regular Expressions - SoCal Code Camp '15 - LA

So many developers see the words "Regular Expressions" and think of a frightening string of crazy symbols. While this is true, they are also a valuable way of manipulating text and knowing the basics can lead to many practical uses that will often save many lines of code. Learning to use regular expression basics will allow many more ways to manipulate text and strings by testing, extracting, and changing the string. We will take a look at some of the ways to do this specifically using the Javascript RegExp Engine.

Transcript

1. Regular Expression Wizardry
   Josiah Mory @kickinbahk
   

   View Slide

2. Let’s set the stage…
   

   View Slide

3. /\A[\w+\-.]+@[a-z\d\-]+(\.[a-z\d\-]+)*\.[a-z]+\z/i
   

   View Slide

4. View Slide

5. What is a Regular
   Expression?
   

   View Slide

6. Regular Expression
   =
   a pattern describing a
   specific string of text
   

   View Slide

7. /regex-pattern-here/
   

   View Slide

8. Regular Expression "Engine"
   =
   a piece of software which
   processes regular expressions
   and tries to match the pattern
   to the given string
   

   View Slide

9. The syntax and
   behavior of a particular
   engine
   =
   regular expression flavor
   

   View Slide

10. 3 Things You Do with
    Regular Expressions
    

    View Slide

11. Search
    a string to see if it matches your
    pattern
    

    View Slide

12. Extract
    a string (or part of a string) that matches
    your pattern
    

    View Slide

13. Replace
    a string by replacing parts that match
    with other text
    

    View Slide

14. “Find-and-Replace on Steroids”
    - Dan Nguyen
    

    View Slide

15. Literal Characters
    

    View Slide

16. Most Characters:
    • a - z
    • A - Z
    • 0 - 9
    

    View Slide

17. Special Characters
    

    View Slide

18. \, ^, $, ., |, ?, *, +, (, ), [, [,
    12 special or (meta) characters
    

    View Slide

19. * If you want to use any of these
    characters as a literal in a regex, you
    need to escape them with a backslash
    

    View Slide

20. DC Picture: AFP/GETTY
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. gandalf_quote1 = "You shall not pass! -Gandalf"
    ~> You shall not pass! -Gandalf The Grey
    the_grey = “ The Grey”
    console.log(gandalf_quote + the_grey);
    

    View Slide

25. gandalf_quote2 = "Yes, yes my dear sir and I do know your name Mr.
    Bilbo Baggins. And you do know my name, though you don't
    remember that I belong to it. I am Gandalf ” + the_grey + “ and
    Gandalf ” + the_grey + “ means me."
    gandalf_quote2 = "Yes, yes my dear sir and I do know your name Mr.
    Bilbo Baggins. And you do know my name, though you don't
    remember that I belong to it. I am Gandalf, and Gandalf, means me."
    

    View Slide

26. View Slide

27. Lookaheads
    ✤ Negative - ?!
    ✤ Positive - ?=
    

    View Slide

28. Capture Groups
    () allow us to group a RegEx
    together
    

    View Slide

29. Groups are numbered 1-99
    

    View Slide

30. You can call a Group using $ and
    the number
    E.g. $1
    

    View Slide

31. To not capture a group in parens
    ?:
    

    View Slide

32. /.*\.com&&|\/(?:(?:groups\/[^\/]+\/videos\/)|
    (?:ondemand|channels)(?:(?:\/less\/)|
    (?:user[0-9]+\/review\/)?([0-9]+).*|(?:\/\w*
    \/))|(?:video\/))?([0-9]+).*$/
    

    View Slide

33. Javascript The Good Parts (Chap 7) - Douglas Crockford
    RegEx Pal - RegEx Tester and Editor for Javascript
    http://regexpal.com/
    Eloquent Javascript (Chap 9) - Marijn Haverbeke
    http://eloquentjavascript.net/09_regexp.html
    MDN (Mozilla Developer Network) on Regular Expressions
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/
    Regular_Expressions
    Josiah’s Github
    https://github.com/Regular_Expressions_SoCalCodeCamp_JS
    

    View Slide