Recognize Regex Easily
Tags: regex, javascript, beginners
Published: 2020-02-16 12:45:40

Looking at docs for Regular Expressions looks like there are a lot of notations you need to learn and memorize to know it. It is a bit of overwhelming information if you don't use regex frequently or just started to use it. Here I will try to showcase basic regex parts which were important for me to know and understand to become familiar with regex. And for details, you can always check [MDN Regex Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) or other sources.

## Regex

Regular expressions are patterns to parse strings, the rules applied to it is universal for all languages. Regex might look like this:

![Regex Example](https://dev-to-uploads.s3.amazonaws.com/i/wiclc81nz0w3pbosjdga.png)

Generally, It can be seen consisted of these 4 parts:

![Regex Pattern](https://dev-to-uploads.s3.amazonaws.com/i/mm11k9frufyx6i5rj4ol.png)

Where:

- Slashes `/` used to enclose regex pattern in JS, similar to quotes for `'string'` for example.
- `^`, `$`, `flags` are optional anchors and flags.
- Pattern is a character combination to be used in a search

So, for example, regex `/x/` will search for the first occurrence of character `x` in a string:

![regex example](https://dev-to-uploads.s3.amazonaws.com/i/i2u5ilpcgz2tlk1xipln.png)

If you want to find all matches for the pattern you can use `/g` flag at the end, which stands for global search:

![regex example](https://dev-to-uploads.s3.amazonaws.com/i/iemuy42n3pspd855tyjt.png)

There are 6 different flags that could be added at the end of regex for special settings. Most used are `/g` for a search for all matches and `/i` for case insensitive searching.

And different characters can be combined for sequence search:

![regex example](https://dev-to-uploads.s3.amazonaws.com/i/yqs7fit07nun5fhunvld.png)

## Pattern

Beside of this, any pattern can be seen as a set of sequences of rules

![regex pattern](https://dev-to-uploads.s3.amazonaws.com/i/ym88tffb2or3s3k6kq0e.png)

For example, to describe pattern for time `12:00` I can write pattern like this one:

### **/ (should be 2 digits) (then colon) (then should be 2 digits) /**

or in terms of regex:

![phone regex](https://dev-to-uploads.s3.amazonaws.com/i/l1h0a7fgibtd6w9pgjvz.png)

Ofc, this is a very general time pattern, since it will also match strings like `25:00` and `score is 160:740`. Try it [here](regexr.com/4ud2r).

## Sequence

Each sequence also can be seen as a pair of Token & Quantity.

![sequence](https://dev-to-uploads.s3.amazonaws.com/i/55ohvbxcfr1vzy9mj95p.png)

Token used to describe what character, set of characters or special symbols need to search for. And Quantity used to say how many times it occurs (number of repeats). The image above says: `Any character from 0 to 9 and it occurs twice in a row`. And when quantity isn't specified could be assumed that token will occur only once, like for semicolon `:` in the example above. Basically, it will be the same as:

![sequence](https://dev-to-uploads.s3.amazonaws.com/i/uw9yzz2korr1owx0d8ge.png)

You will meet plenty of quantity symbols, like `+`, `?`, `*`, `{n}`, `{n,m}` all used to describe how many repetitions of preceding token should be. Like in the example below character `u` could be present 0 or more times:

![regex example](https://dev-to-uploads.s3.amazonaws.com/i/fitzpxcwpldj6bhckzx9.png)

## Ranges and Groups

Frequently, you will see tokens as a set of nested sequences. These sequences could be defined as ranges and groups. The range set should be defined with brackets `[set of characters]` and it defines possible options rather than strong sequences. Like `/cat/` one might read as `could have c, a, t characters` rather than just the word `cat`. So regex below will have 6 matches in the next string:

![regex range](https://dev-to-uploads.s3.amazonaws.com/i/zcrcnj0sxln425yktyq1.png)

Back to parsing time example lets create regex for hours. Regex can parse numbers as single digits between 0 and 9. So to match `16` hours i.e. we need set rules for possible values of first and second digit in hours. We will also split it into 2 possible sets:

### **/ (should be number between 00-19) or (number between 20-23) /**

Next regex will define match which starts with one token which rather `0` or `1` and followed by another one token which is one digit from `0` to `9`.

![regex example](https://dev-to-uploads.s3.amazonaws.com/i/7znjx7zddzo32ijvv12g.png)

So this way we will describe digits from `00` to `19`. Now we can describe hours within the 20-23 hrs period more precisely. The rules will be like this:

![regex example](https://dev-to-uploads.s3.amazonaws.com/i/o7alzryigh7kht5rrijp.png)

In regex `|` pipe symbol used for OR operator and the parenthesis `(group)` used to group things. And combining it with rules for semicolon and minutes will have this regex for time:

![regex example](https://dev-to-uploads.s3.amazonaws.com/i/z60zr3eg8cnxg00w1ya7.png)

You can test it [here ->](regexr.com/4u536)

## Anchors

Special anchors `/^` on start and `$/` end of a pattern used to match the beginning and end of the string. And you can use both when you want to restrict input to only what regex rules allow. In case of time regex:

![regex example](https://dev-to-uploads.s3.amazonaws.com/i/3cfsekok38x7p0r4c3yu.png)


### Additional Resources:

Here is few resources to play, don't forget to check community regexes from sidebar menu for some inspiration

- [Regexr Playground](https://regexr.com/)
- [regex101](https://regex101.com/)