DEV Community

loading...
Cover image for Regex - underrated or overHATED? Part 2/3

Regex - underrated or overHATED? Part 2/3

Vinicius Cerqueira Bonifácio
Self-taught MERN stack developer, technology passionate, Ruby on Rails admirer, Ubuntu evangelist, ex mountain guide, active football player, inactive surfer, professional backpacker and hitchhiker.
Updated on ・4 min read

Hi, dear devs.

As I have promised previously I am back with the part 2 of our Regex fundamentals series.

" ... - I never go back on my words, that's my ninja way. " (Naruto Uzumaki)

Naruto Blinking

If you are coming straight from the part 1, thanks for following along. 😉

If it is your first time here, please check out the part 1 because we will use most of the concepts from there along with the new ones. 🏃‍♀️ 🏃‍♂️

So let's not beat about the bush and start our part 2. 😁

💡 I expect you to have the "boilerplate" from part 1 opened and running there. 💡

This is the new value of ourText for now. 👇

// This game really happened in a parallel universe
// I swear I was there :)
let ourText =
  'Gooooooal, Griezmann got the ball over the goalkeeper Gatuso and scored for Granada FC!';
Enter fullscreen mode Exit fullscreen mode

The Plus Operator +

It stands for ONE or more characters. In short, a given character which appears one or more times. In this particular example, the o letter.

let ourRegex = /go+/gi;
Enter fullscreen mode Exit fullscreen mode

The result in our console:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'Goooooo', // Gooooooal
    'go',  // got
    'go',  // goalkeeper
    ]
Enter fullscreen mode Exit fullscreen mode

The Asterisk Operator * ✳️

It stands for ZERO or more characters. In short, a given character which appears zero or more times.

let ourRegex = /go*/gi;
Enter fullscreen mode Exit fullscreen mode
The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'Goooooo', // Gooooooal
    'G',       // Griezmann
    'go',      // got
    'go',      // goalkeeper
    'G',       // Gatuso
    'G',       // Granada
    ]
Enter fullscreen mode Exit fullscreen mode

The Lazy Matching Operator ?

As well as the ^ operator, the ? also has more than just one usage but again, once you have understood one of them the other(s) will be Chuck Berry pie of cherry. 😂

Chuck Berry

let ourRegex = /gr[a-z]*?a/gi;
Enter fullscreen mode Exit fullscreen mode
The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'Griezma', 'Gra' ]
Enter fullscreen mode Exit fullscreen mode

⚠️ Without the lazy matching operator ? the result would be slightly different, for instance:

let ourRegex = /gr[a-z]*a/gi;
Enter fullscreen mode Exit fullscreen mode

Would have returned:

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'Griezma', // Griezmann
    'Granada',   // Granada
    ]
Enter fullscreen mode Exit fullscreen mode

Does it make sense? 😃 In the first example it returned the pattern as soon as it had found the first a letter in Granada (Gra) meanwhile in the second one, it checked until the last occurrence of a and then returned.

The ^ Operator (again? 🤯)

And no, it is not a déjà vu.

Deja vu

In this example, it searches for patterns in the beginning of the string,

let ourRegex = /^Griezmann/i;
Enter fullscreen mode Exit fullscreen mode

Let's also have some falsy results because not everything in life is positive. (That is not exactly a bad thing! 🤔)

The Result of our comparison
  Has Pattern?: false
  The Pattern:  null
Enter fullscreen mode Exit fullscreen mode

Because Griezmann is there but not in the beginning of ourText. Right time but wrong place I could say.

The Money Sign Operator $ 💲

It is used for searching patterns in the ending of the string.

let ourRegex = /FC!$/i;
Enter fullscreen mode Exit fullscreen mode
The Result of our comparison
  Has Pattern?: true
  The Pattern:  [
    'FC!',
    index: 84,
    ...
  ]
Enter fullscreen mode Exit fullscreen mode

Shorthand Char Classes

It sounds more complicated then it actually is. Shorthand is just a different manner to the same thing but, guess what, in a shorter way.

I have created this table just for illustrative purposes.

Normal usage Shorthand Representing
[A-Za-z0-9_] \w the alphanumerical chars and the underscore
[^a-za-z0-9_] \W the non-alphanumerical chars and the underscore
[0-9] \d the numerical chars
[^0-9] \D the non-numerical chars
[\r\t\f\n\v] \s the return, tab, form feed, new line and vertical whitespaces.
[^\r\t\f\n\v] \S the non-return, non-tab, so on and so far.

The Curly Braces {}

We use the curly braces in order to specify the number of matches of a given character.

  • Upper and Lower Number of Matches
  let ourRegex = /go{1,6}al/gi;
Enter fullscreen mode Exit fullscreen mode

We are basically telling: please bring me the word goal where the o letter appears at least 1 and up to 6 times. The result is ...

  The Result of our comparison
    Has Pattern?: true
    The Pattern:  [ 'Gooooooal', 'goal' ]
Enter fullscreen mode Exit fullscreen mode
  • The Specific Lower Number Matches
  let ourRegex = /go{3,}al/gi;
Enter fullscreen mode Exit fullscreen mode

Now we have just specified we want the word goal but only if the o letter appears at least 3 times on it.

An this is what we have got:

  The Result of our comparison
    Has Pattern?: true
    The Pattern:  [ 'Gooooooal' ]
Enter fullscreen mode Exit fullscreen mode
  • The Exact Number Matches
  let ourRegex = /go{1}al/gi;
Enter fullscreen mode Exit fullscreen mode

And finally we have stipulated that all we want to have is a match where the word goal without any kind of emphasis, in its more pure form. 🥺

And bingo!

  The Result of our comparison
    Has Pattern?: true
    The Pattern:  [ 'goal' ] // goalkeeper
Enter fullscreen mode Exit fullscreen mode

Checking For All or None ?

Yeah, the ? strikes back. And I don't want to spoil your fun but in the part 3 it will show up again 😨 (twice 🤫).

Anyway, let's say we want to know which one is the correct form of the word color?

✋ No regionalism allowed, guys. It is just an example. ✋

let ourText = 'Is it colour or color the correct one?';
Enter fullscreen mode Exit fullscreen mode
let ourRegex = /colou?r/g;
Enter fullscreen mode Exit fullscreen mode

Answer: both! 🇬🇧 🤝 🇺🇸

The Result of our comparison
  Has Pattern?: true
  The Pattern:  [ 'colour', 'color' ]
Enter fullscreen mode Exit fullscreen mode

And that is the end of the part 2. I really hope you guys have learned (or learnt? 🤔 😹) something so far.

Edited:
The last part of this series probably will be released next Thursday because I can see here, in my crystal ball, my week being very busy. (🔮)

Thanks and enjoy your Sunday wherever you are now! 🙏

I am gonna do the dishes now because there is someone very angry here. 😅

Cheerio! 👋

Discussion (0)