/^[Rr]eg(ular\s)?[Ee]x(p|pressions?)?$/

Jordan Kasper | @jakerella

What are They?

String Pattern Matchers

• Test a string against a pattern (true/false)
• Match specific data in a string
• Often used for data/input validation
• Can efficiently* find data in large text (e.g. log files)
• Sometimes used to find and replace specific text

What Language?

What Language?

What Engine?

Regex Engines

https://en.wikipedia.org/wiki/Comparison_of_regular_expression_engines

What do they look like?

/the regex goes in here/

`the regex goes in here`

"the regex goes in here"

"/the regex goes in here/"

Language-Specific

/foo/.test("foobar")

preg_match("/foo/", "foobar");

/foo/ =~ "foobar"

"foobar" =~ /foo/

Common Elements

(Using JavaScript syntax)

Simple Character Test

/a/.test("JavaScript Rules")   // true

/z/.test("JavaScript Rules")   // false

Testing versus Matching

true/false vs. matched groups

/a/.test("JavaScript Rules")   // true
"JavaScript Rules".match(/a/)  // ["a"]
    

"JavaScript Rules".match(/z/)  // null
    

Where's the other "a"?

"JavaScript Rules".match(/a/)   // ["a"]
    

Case Sensitivity

"JavaScript Rules".match(/r/)    // ["r"]
    
// make it global
"JavaScript Rules".match(/r/g)   // ["r"]
    
// make it case-insensitive AND global
"JavaScript Rules".match(/r/ig)  // ["r", "R"]
    

Multiple Characters

/script/i.test("JavaScript Rules")   // true

"JavaScript Rules".match(/script/i)  // ["Script"]
    

Match Any Character

/jordan/i.test("Jordan")   // true
    

/jord.n/i.test("Jordan")   // true
/jord.n/i.test("Jordon")   // true
/jord.n/i.test("Jordyn")   // true
    

Classes, Ranges, and Repetition

[ ], +, { }

"c52a93".match(/c52a93/)               // ["c52a93"]
    
"b5d055".match(/c52a93/)               // null
    
"c52a93".match(/[0123456789abcdef]/)   // ["c"]
    
"c52a93".match(/[0123456789abcdef]/g)  // ["c", "5", "2", "a", "9", 3"]
    
"c52a93".match(/[0123456789abcdef]+/)  // ["c52a93"]
    
"c52a93".match(/[0-9a-f]+/)            // ["c52a93"]
    
"c52a9300".match(/[0-9a-f]+/)          // ["c52a9300"]
    
"c52a9300".match(/[0-9a-f]{6}/)        // ["c52a93"]
    
"c52a9300".match(/[0-9a-f]{6,8}/)      // ["c52a9300"]
    

Making Something Optional

?

"#c52a93".match(/[0-9a-f]{6,8}/)   // ["c52a93"]
    
"#c52a93".match(/#[0-9a-f]{6,8}/)  // ["#c52a93"]
    
"c52a93".match(/#[0-9a-f]{6,8}/)   // null
    
"c52a93".match(/#?[0-9a-f]{6,8}/)  // ["c52a93"]
    

Zero or More

*

"value='c52a93'".match(/value='[0-9a-f]+'/)  // ["value='c52a93'"]
    
"value=''".match(/value='[0-9a-f]+'/)        // null
    
"value=''".match(/value='[0-9a-f]*'/)        // ["value=''"]
    

Negation

[^]

"jordan kasper".match(/[a-z]+/g)     // [ "jordan", "kasper" ]
    
"jordan o'moran".match(/[a-z]+/g)    // [ "jordan", "o", "moran" ]
    
"jordan o'moran".match(/[^ ]+/g)     // [ "jordan", "o'moran" ]
    

Greediness and Laziness

RegEx likes to eat up characters, so be careful!

"<p class='foo' id='bar'>".match(/[a-z]+='.+'/g)
        
// What you wanted: [ "class='foo'", "id='bar'" ]
        
// What you got: [ "class='foo' id='bar'" ]
    

The + is greedy: keeps going until repeated token stops.

. is the token, which matches everything...

it matches the "f" in "foo", then "o" and "o"

then matches the single quote after "foo" and keeps going!

Greediness and Laziness

We can make the + lazy!

"<p class='foo' id='bar'>".match(/[a-z]+='.+?'/g)
// There it is: [ "class='foo'", "id='bar'" ]
    

Escaping Characters

If you need to use the special characters as literals,
you need to escape them with a backslash: \

"567.99".match(/[0-9]+.[0-9]{2}/)   // ["567.99"]
        
"567a99".match(/[0-9]+.[0-9]{2}/)   // ["567a99"]
        
"567.99".match(/[0-9]+\.[0-9]{2}/)  // ["567.99"]
        
"567a99".match(/[0-9]+\.[0-9]{2}/)  // null
    

Anchors

^ and $

/[0-9]+\.[0-9]{2}/.test("576.99")       // true
        
/[0-9]+\.[0-9]{2}/.test("f00.00bar")    // true
        
/^[0-9]+\.[0-9]{2}$/.test("f00.00bar")  // false
        
/^[0-9]+\.[0-9]{2}$/.test("576.99")     // true
    

Grouping, Efficiency, and Shorthands

Grouping and Alternation

( ) and |

"1234 Main St.".match(/[0-9]+ [a-z]+ [a-z\.]+/i)
// ["1234 Main St."]
        
"1234 Main St.".match(/([0-9]+) ([a-z]+) ([a-z\.]+)/i)
// ["1234", "Main", "St."]
        
"1234 Main St.".match(/([0-9]+) ([a-z]+) (st|rd|ave)\.?/i)
// ["1234", "Main", "St"]
    

Your language may include the entire matched string:

"1234 Main St.".match(/([0-9]+) ([a-z]+) (st|rd|ave)\.?/i)
// ["1234 Main St.", "1234", "Main", "St"]
    

Grouping Efficiency

Caution: matched groups add processing time & memory!

Use non-matching groups when possible: (?:)

"1234 Main St.".match(/([0-9]+) ([a-z]+) (st|rd|ave)\.?/i)
// [ "1234", "Main", "St" ]
    
"1234 Main St.".match(/[0-9]+ ([a-z]+) (st|rd|ave)\.?/i)
// [ "Main", "St" ]
    
"1234 Main St.".match(/[0-9]+ ([a-z]+ (st|rd|ave)\.?)/i)
// [ "Main St.", "St" ]
    
"1234 Main St.".match(/[0-9]+ ([a-z]+ (?:st|rd|ave)\.?)/i)
// [ "Main St." ]
    

Match Replacement

Caution! Varies widely across languages!

"I like {{fav}} the most".replace(/{{fav}}/, "dogs")
        
// "I like dogs the most"
        
const email = "mary@example.com"
email.replace(/([a-z]+)@([a-z.]+)/i, "https://$2/users/$1")
        
// "https://example.com/users/mary"
    

Whitespace & Shorthands

You can negate these shorthands using a capital letter:
\S, \D, \W
or by using a negation character class: [^\s]

Shorthand Example

const users = [
    "jakerella      Jordan 42",
    "ro_ro	Alex	999",
    "Zee3ii Nick 13"
]
    

users.forEach((user) => {
    console.log(  user.match(/(\w+)\s+(\w+)\s+(\d+)/)  )
})
// ["jakerella", "Jordan", "42"]
// ["ro_ro", "Alex", "999"]
// ["Zee3ii", "Nick", "13"]
    

Anchors & Multiline

^ and $

jakerella      Jordan 42
ro_ro	Alex	999
Zee3ii Nick 13
    

What if we want all of the usernames?

file.match(/\w+/)   // [ "jakerella" ]
        
file.match(/\w+/g)  // [ "jakerella", "Jordan", "42", "ro_ro", ... ]
        
file.match(/^\w+/g) // [ "jakerella" ]
    

The Multiline Flag

file.match(/^\w+/gm)  // [ "jakerella", "ro_ro", "Zee3ii" ]
    

Efficiency Warnings

Watch out for:

• Too many groups (use non-matching)
• Large source texts (use anchors)
• Unstructured data (like HTML)

HTML Warning

You can't parse [X]HTML with regex. Regex is not a tool that can be used to correctly parse HTML. As I have answered in HTML-and-regex questions so many times before, the use of regex will not allow you to consume HTML. HTML is not a regular language and hence cannot be parsed by regular expressions. Regex queries are not equipped to break down HTML into its meaningful parts. Even enhanced irregular regular expressions as used by Perl are not up to the task of parsing HTML. You will never make me crack. Every time you attempt to parse HTML with regular expressions, the unholy child weeps the blood of virgins, and Russian hackers pwn your webapp. Parsing HTML with regex summons tainted souls into the realm of the living. HTML and regex go together like love, marriage, and ritual infanticide. The <center> cannot hold it is too late. If you parse HTML with regex you are giving in to Them and their blasphemous ways which doom us all to inhuman toil for the One whose Name cannot be expressed in the Basic Multilingual Plane, he comes. HTML-plus-regexp will liquify the n​erves of the sentient whilst you observe, your psyche withering in the onslaught of horror. It is too late it is too late we cannot be saved the transgression of a chi͡ld ensures regex will consume all living tissue (except for HTML which it cannot, as previously prophesied) dear lord help us how can anyone survive this scourge using regex to parse HTML has doomed humanity to an eternity of dread torture and security holes using regex as a tool to process HTML establishes a breach between this world and the dread realm of c͒ͪo͛ͫrrupt entities (like SGML entities, but more corrupt) a mere glimpse of the world of reg​ex parsers for HTML will ins​tantly transport a programmer's consciousness into a world of ceaseless screaming, he comes, the pestilent slithy regex-infection wil​l devour your HT​ML parser, application and existence for all time like Visual Basic only worse he comes he comes do not fi​ght he com̡e̶s, ̕h̵i​s un̨ho͞ly radiańcé destro҉ying all enli̍̈́̂̈́ghtenment, HTML tags lea͠ki̧n͘g fr̶ǫm ̡yo​͟ur eye͢s̸ ̛l̕ik͏e liq​uid pain, the song of re̸gular exp​ression parsing will exti​nguish the voices of mor​tal man from the sp​here I can see it can you see ̲͚̖͔̙î̩́t̲͎̩̱͔́̋̀ it is beautiful t​he final snuffing of the lie​s of Man ALL IS LOŚ͖̩͇̗̪̏̈́T ALL I​S LOST the pon̷y he comes he c̶̮omes he comes the ich​or permeates all MY FACE MY FACE ᵒh god no NO NOO̼O​O NΘ stop the an​*̶͑̾̾​̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e n​ot rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ

https://stackoverflow.com/a/1732454/1985406

Resources

• Playground: regex101.com
• Various Engine Info: Wikipedia
• Reference Docs: regular-expressions.info
• Diagrams: regexper.com
• Dead Tree Version: "Mastering Regular Expressions"
• Fun: regexcrossword.com

Thank You!

/^[Rr]eg(ular\s)?[Ee]x(p|pressions?)?$/

Bonus Content!

Look Arounds

They are not matches, but assertions.

Not supported in all engines / languages!

Look Aheads

Assert that the group exists ahead of the match: (?=)

"The fat cat sat on the mat".match(/(the)(?=\sfat)/ig)
                            // ["The"]
    

Look Behinds

Assert that the group exists behind the match: (?<=)

"The fat cat sat on the mat".match(/(?<=the\s)([a-z]at)/ig)
                            // ["fat", "mat"]