What’s a Regex Pt 2.

This is a follow up to my previous post so if you haven’t read that one check it out. Again this tutorial is specific to the Javascript flavor of Regex so there may be some minor differences in other languages.

Let’s jump right in:

Character Classes

Character 'Classes':
  [...] list of acceptable characters any of them
  [^...] list of unacceptable characters
  [0-9] is the same as [0123456789]
  [a-z] any letter
  [A-Z] any capital letter
  [a-zA-Z] any letter without case
  [\r\n] match any line break
  [\^\-\]] matches any carat, hyphen, or closing bracket character. Note that you need to escape the characters with the backslash in order for them not to be read as metacharacters.

Here are some examples of these being used with the test method.

/[0-9]/.test('123') => true
/[a-z]/.test('abc') => true
/[a-z]/.test('ABC') => false
/[^0-9]/.test('a!%b') => true

But wait there are a couple shortcuts!

//for decimals
/[0-9]/.test('123') => true
/\d/.test('123') => true
//for anything other than decimals
/\D/.test('123') => false
/\D/.test('abc') => true
/\D/.test('$%#') => true
//for any word character [a-zA-Z0-9_]
/\w/.test('abc123ABC') => true
//for any non-word character
/\W/.test('123abc') => false
/\W/.test('!@#$%^&') => true
//for anything that isn't a return or line break character
/./.test(' ') => true
/./.test('~asd#345') => true
//for any whitespace character 
/\s/.test(' ') => true
/\S/.test(' ') => false

Quantifiers

Quantifiers:
* matches 0 or more.
? matches 0 or 1
+ matches 1 or more occurrences
{4} matches 4 occurrences
{2,4} matches between 2 and 4 occurrences
{4,} matches 4 or more occurrences

Example say you wanted to find the string 'wazzzuuupp' but you aren’t sure how many a’s, u’s, z’s, or p’s someone is going to write. For this let’s try out the + quantifier.

'wazzuuupp'.match(/wa+z+u+p+/)
   => ["wazzuuupp", index: 0, input: "wazzuuupp"]
'waaazzzuuuuppppp'.match(/wa+z+u+p+/)
   => ["waaazzzuuuuppppp", index: 0, input: "waaazzzuuuuppppp"]

Now what if we don’t know if we are going to get z’s or s’s. For that let’s use a capturing group. (s|z) this says match s or z after this we can add a + to say to match one or more of either s or z

'wasssuuupp'.match(/wa+(s|z)+u+p+/)
   =>["wasssuuupp", "s", index: 0, input: "wasssuuupp"]

But wait wasn’t that extra s doing there? Well a capturing group by default captures and remembers the match so it will also give you 's' as a match even though you probably don’t want it. If we simply change (s|z) to (?:s|z) we change it from a capturing group to a non-capturing group, meaning it will match but won’t remember that it’s matched.

'wasssuuupp'.match(/wa+(?:s|z)+u+p+/)
   =>["wasssuuupp", index: 0, input: "wasssuuupp"]

That’s better.

Flags

Now if we make the regex global we can get every match in a string.

var whatIsUp = 'wasssuuuuuupppppp wazzzuuuppp waaaasssuuuuppppppp whatisup'
whatIsUp.match(/wa+(?:s|z)+u+p+/g)
   => ["wasssuuuuuupppppp", "wazzzuuuppp", "waaaasssuuuuppppppp"]

Super useful!

What if var whatIsUp = 'wassSSSuuuuuupppppp wAzzzuuUPPp wAAAASSSuuuuppppppp whatisup' Well then we can use the i flag to make the regex case insensitive. We’ll just plop it right behind the g flag to keep it global also.

whatIsUp.match(/wa+(?:s|z)+u+p+/gi)
   => ["wassSSSuuuuuupppppp", "wAzzzuuUPPp", "wAAAASSSuuuuppppppp"]

Said last time that I’d also talk about the m flag which is often vaguely described as just ‘multiline’. What that means though is if you have starting and ending anchors ^ and $ then you can make them act as wrappers for the entire line before a line break. Here is a pretty contrived example of that. As of right now I don’t really know what the use of this is but maybe you can find it really useful somehow.

That’s all for now! Instead of giving you a review cheat sheet I’m gonna refer you to the MDN page that I pretty much always use as a reference. Another Great reference I’ve found is here; this reference is a bit more advanced, i.e. there’s a lot of things that don’t work in javascript, but you can start to get an idea of what the difference is between regex flavors.