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)
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!';
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;
The result in our console:
The Result of our comparison
Has Pattern?: true
The Pattern: [
'Goooooo', // Gooooooal
'go', // got
'go', // goalkeeper
]
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;
The Result of our comparison
Has Pattern?: true
The Pattern: [
'Goooooo', // Gooooooal
'G', // Griezmann
'go', // got
'go', // goalkeeper
'G', // Gatuso
'G', // Granada
]
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. 😂
let ourRegex = /gr[a-z]*?a/gi;
The Result of our comparison
Has Pattern?: true
The Pattern: [ 'Griezma', 'Gra' ]
⚠️ Without the lazy matching operator ?
the result would be slightly different, for instance:
let ourRegex = /gr[a-z]*a/gi;
Would have returned:
The Result of our comparison
Has Pattern?: true
The Pattern: [
'Griezma', // Griezmann
'Granada', // Granada
]
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.
In this example, it searches for patterns in the beginning of the string,
let ourRegex = /^Griezmann/i;
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
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;
The Result of our comparison
Has Pattern?: true
The Pattern: [
'FC!',
index: 84,
...
]
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;
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' ]
- The Specific Lower Number Matches
let ourRegex = /go{3,}al/gi;
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' ]
- The Exact Number Matches
let ourRegex = /go{1}al/gi;
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
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?';
let ourRegex = /colou?r/g;
Answer: both! 🇬🇧 🤝 🇺🇸
The Result of our comparison
Has Pattern?: true
The Pattern: [ 'colour', 'color' ]
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)