DEV Community

Cover image for Regex - underrated or overHATED? Part 2/3
Vinicius Cerqueira Bonifácio
Vinicius Cerqueira Bonifácio

Posted on • Edited on

Regex - underrated or overHATED? Part 2/3

#regex #javascript #webdev

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! 👋

Top comments (0)

Read next

abhay_yt_52a8e72b213be229 profile image

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Mastering MobX: Simplified and Reactive State Management for React

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Controlled vs Uncontrolled Components in React: Choosing the Right Approach

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

React.js Explained: A Comprehensive Guide to Building Modern Web Applications

Abhay Singh Kathayat -