Regex - underrated or overHATED? Part 2/3 
Tags: regex, javascript, webdev
Published: 2021-03-14 14:15:42

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qcgix46k33buczxmrrh.gif)

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](https://dev.to/vinicius77/regexp-underrated-or-overhated-part-1-3-2fg7) 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. 👇

```javascript
// 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.

```javascript
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.

```javascript
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._ 😂

![Chuck Berry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0phsc9dt3dclsymdh4an.gif)

```javascript
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:

```javascript
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_.

![Deja vu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjkt0intyvrfw9hl1lmc.gif)

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

```javascript
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.

```javascript
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**

  ```javascript
  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**

  ```javascript
  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**

  ```javascript
  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. ✋

```javascript
let ourText = 'Is it colour or color the correct one?';
```

```javascript
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](https://dev.to/vinicius77/regex-underrated-or-overhated-part-3-3-1hdi) 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! 👋