Regex basics with explanations and examples
Tags: javascript, beginners, regex
Published: 2021-01-18 21:50:44

Regular expressions or regex, as it's more commonly known is a sequence of characters that form a search pattern. Simply put, a regular expression is like a database query, but for a string.
In this article, we will talk about the different special characters you can use and provide examples for them. After reading this, hopefully you will not have trouble with regex.

## How to use regular expressions in JavaScript

To use a regular expression in JavaScript simply use the `match()` function on a string like this
```js
const response = string.match('your-regex-here');
```
Of course there are multiple functions that deal with matching regex, but we want to talk about the regex itself, so here is a [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#using_regular_expressions_in_javascript) that will help you.

## Basic form of a RegEx

```js
/regex/gmi
```

As you can see the expression has something to _search_ in a string surrounded by `/` characters.
The `g` at the end stands for _global_, meaning search the entire string, not just the first line.
Additionally, you can add other characters at the end, such as `i` for _case insensitive_(ignores the difference between upper and lowercase letters) and `m` meaning _multiline_, making the expression search by lines.

**Note:** You don't need to use all three parameters, so you can just have `/regex/g`.

## Basic searches

A RegEx can just be used as a way to search for a word or character in a string, although that defeats the purpose of even using them, knowing that we have functions that do this in most programming languages.

We will be using this string for our examples:
```js
const string = 'RegExr was created by gskinner.com, and is proudly hosted by Media Temple.

Edit the Expression & Text to see matches. Roll over matches or the expression for details. PCRE & JavaScript flavors of RegEx are supported. Validate your expression with Tests mode.

The side bar includes a Cheatsheet, full Reference, and Help. You can also Save & Share with the Community, and view patterns you create or favorite in My Patterns.

Explore results with the Tools below. Replace & List output custom results. Details lists capture groups. Explain describes your expression in plain English.
';
```

**Examples:**
```js
/,/g
```

This will return all the commas(`,`) in the string.

```js
/in/g
```

This will return all the occurrences of the `in` word in the string.

## RegEx special character
What makes regular expressions amazing are the special characters that we can use. Such as:

**Note:** In case we need these characters in our search, we can just use the `\` character to _escape_ and say that this is not a RegEx related special character.

1.the `+` character
```js
/e+/g
```
This will return any sequence of the string, where there is at least 1 `e`. So it will return isolated `e` characters as well as `e` characters that are grouped(such as _Cheatsh **ee** t_)

2.the `?` character
```js
/ea?/g
```
This will return all sequences that have an `e` and also the sequences that also have an `a`. The `?` character says that whatever is in front of it is _optional_.

3.the `*` character
```js
/he*/g
```
This special character is a combination of the `+` and `?` characters. Meaning it will return all `h` letters and then all possible `e` characters after it.(e.g. _Cheatsh **ee** t_, c **h** aracters).

4.the `.` character
```js
/.he/g
```

The `.` character means _match anything_. So in this case above `The`, `the` or `che` will match it.

5.the `\w` and `\W` characters
*`\w` - will match any _word_
*`\W` - will match anything that's _not a word_

6.the `\s` and `\S` characters
*`\s` - will match any _white space_
*`\S` - will match anything that's not a _white space_

7.the `|` character - this is like saying _OR_

8.the `^` character
```js
/^T/g
```
This will only match the character following it if it exists at the beginning of the string.

9.the `$` character
```js
/\.$/g
```

This will only match a `.` character if it is at the end of the string.

10.the `<=` characters
```js
/(?<=[tT]he)./g
```
This will match the characters that are preceded by the specified search. In this case, any one character that follows the words `the` or `The`. 

11.the `<!` characters
```js
/(?<![tT]he)./g
```

This is the opposite of the `<=` characters. It will return anything the `<=` does not return.

## Tips and tricks
There are some different commands with RegEx that do many things and offer variety to our searches.

1.the _count_ `{}`
```js
/\w{3,}/g
```
This will match any words with more than 3 letters. You can also add another value (`{3, 5}`) that will limit the word between 3 and 5 letters.

2.the _options_ `[]`

```js
/[tcT]he/g
```

This will match a string with the last two letters `he` and the first letter a character from the provided list (t | c | T).

**Note:** To provide an interval we can just use the `-` character, like this `[a-zA-Z0-9]`. This will match anything in the specified ranges (a to z - lowercase, A to Z - uppercase and 0 to 9 - numbers)

3.grouping `()`
```js
/(ea){2,3}/g
```

This will match occurrences of the `ea` group of characters that appear between 2 and 3 times. If we used just `/ea{2,3}/g` it would only match the occurrences of the `a` character.

## Resources
This [website](https://regexr.com/) is an amazing tool for testing RegEx. I recommend it. This is how I learned RegEx and it's very easy to practice with it.