Regualar Expressions

Learning RegEx In JavaScript

-Eloquent JavaScript

Getting Started with Regex

  • Used throughout JavaScript to match patterns inside strings, most commonly used for validating input
  • At first glance, RegEx patterns can look confusing and even intimidating due to their use of Flags, and Characters, but they really are quite simple 
                    
                  var regex = /^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/;

Creating a Regex Pattern

  • Create Regex patterns with:
    • the RegExp("pattern") constructor method
    • Regex Literals - /pattern/
  • Regex Literals can not contain a string.
    • Incorrect - /"dontdoit"/
    • Correct - /doit/
            
               var phrase = 'I am a fan of AnnieCannons.';
               /** Uses RegExp() Constructor **/
                var regex = new RegExp("an");
                /** Uses literal value **/
                var shorthand = /an/;
                var flags = /an/gi; 
                console.log(phrase.match(shorthand));
                /** "an", index: 8, input: "I am a fan of AnnieCannons."] **/
               console.log(phrase.match(flags)); 
               /** prints ["an", "An", "an"] **/

Regex Character classes

  • Flags come at the end of a regex pattern.
    • \g - Global, find ever instance
    • \i - Ignore case
    • \m
  • Character Classes: allow us to specify a range of characters in a sequence.
    • \w - match word
    • \d - search for number, digit
    • \D - omit digit
    • \W - omit words
    • \s - match any whitespace character
    • \S - omit any whitespace character
    • [abc] - [range]Match any a,b, or c
    • [^abc] - ^ symbol, do not find a, b, or c
    • [a-zA-z0-9] - Match any letter or digit
                         
                            var phrase = 'I am a fan of AnnieCannons.'
                            var first = /[an]/g
                            console.log(phrase.match(first)); 
                            /** prints ["a", "a", "a", "n", "n", "n", "a", "n", "n", "n"] **/
                            var second = /[an]/gi
                             console.log(phrase.match(second));
                             /** prints ["a", "a", "a", "n", "A", "n", "n", "a", "n", "n", "n"] **/
                            var third = /[an]/
                            console.log(phrase.match(third)); 
                             /** print ["a", index: 2, input: "I am a fan of AnnieCannons."] **/
                             var fourth = /\W[an]/ /** Find any a character that does not follow a character (whitespace). 
                            console.log(phrase.match(fourth)); 
                            /** prints [" a", " a", " A"] **/
                            var fifth = /\s/g ** Match any whitespace in our sequence. 
                            console.log(phrase.match(phrase)); 
                            /** prints [" ", " ", " ", " ", " "] (All whitespace in phrase variable)**/

Identifying Regex Sequences

  • Using /{min,max}/
    • Find a set of three digits: /\d{3}/
    • Finds a set of 1 to 2 digits:/\d{1,2}/
    • Finds 0 or more digit /\d*/
    • Finds 1 or more /\d+/
    • Matches 0 to 1 digit (optional): /\d?/

Identifying Regex Sequences

                    
                        var num = '123 234 345';
                        
                        /** Match 1 to 2 digits */
                        var one = /\d{1,2}/
                        /** Matches '12' */

                        /** Matches '123 ' */
                        var two = /\d{1,2}3./
                        /** Match 1 to 2 digits preceeding a 3 and any character following */
    

                        /** Match 1 to 2 digits preceeding a 3 and any character following */
                        var two = /\d{1,2}3./
                        /** Matches '123 ' */

                        /**Match 1 to 2 digits that proceed a three, proceeded by any character */
                        var three = /\d{1,2}3.+/ 
                        /** Matches entire string '123 234 345**/

                         /** Find a 3 in between a digit */
                        var four = \d3\d/ 
                        /** Matches '234' */

                        /** Match 0 or 1 '23' */
                        var five = /\23?/
                        /** Matches FIRST '23', 0 or 1 */

Capture Groups in Regex

  • Allow Us to Capture a group of characters using ()
    • Find any 1 proceeded by 23
      Ex. var regex = /1(23)/
    • Find any 1 proceeded by either 23 or 24
      Ex. var regex = /1(23)/
  • We can use quantifiers with our capturing groups to find specific values.
    • Ex. One of more digits proceeding either 2 or 5
      var regex = /\d+(2|5)/g

                        var num = '123.234.3456';
                        var one = /(23)/g 
                        /** Matches '23', '23' */

                        /** Match any character before a 2 or three */
                        var three = /.(2|3)/
                        /** Matches '12', '.2', '.3' */

                        /** Match any . symbol before a 2 or three */
                        var three = /\.(2|3)/
                        /** Matches '.2' , '.3' */

                        /** Match any digit proceeded by 2 or 5 */
                        var four = /\d(2|5)/
                        /** Matches '12', '45' */

                        /** Match any digit proceeded by zero or one instances of 2 or 5 */
                        var five = /\d(?=2|5)/g
                        /** Matches '1', '4' */

THE END

Thank you for your attention!