JavaScript Regex Tutorial Zero to Hero

JavaScript regular expressions, also known as regex, are powerful tools for working with text. They allow you to search, replace, and manipulate text based on patterns.

In this tutorial, I will cover the basics of regex and gradually move on to more advanced topics.

Basic syntax

In JavaScript, you create a regular expression by enclosing a pattern between two forward slashes /pattern/. For example, the pattern /hello/ matches the word "hello" in a text.

You can also create a regular expression using the RegExp constructor. For example:

This is equivalent to the /hello/ pattern.

To test if a string matches a regular expression, you can use the test() method. For example:

Character classes

Character classes allow you to match a set of characters. For example, the pattern /[aeiou]/ matches any vowel.

Here are some common character classes:

1. [a-z] matches any lowercase letter
2. [A-Z] matches any uppercase letter
3. [0-9] matches any digit
4. . matches any character except newline
5. \d matches any digit (equivalent to [0-9])
6. \w matches any word character (letters, digits, or underscore)
7. \s matches any whitespace character (space, tab, or newline)

For example, the pattern /[a-z]+\d/ matches any sequence of lowercase letters followed by a digit.

Quantifiers

Quantifiers allow you to match a certain number of occurrences of a character or group.

Here are some common quantifiers:

1. + matches one or more occurrences
2. * matches zero or more occurrences
3. ? matches zero or one occurrence
4. {n} matches exactly n occurrences
5. {n,} matches at least n occurrences
6. {n,m} matches between n and m occurrences

For example, the pattern /a+/ matches one or more "a" characters, while the pattern /a*/ matches zero or more "a" characters.

Anchors

Anchors allow you to match the beginning or end of a line or string.

Here are some common anchors:

1. ^ matches the beginning of a line or string
2. $ matches the end of a line or string
3. \b matches a word boundary (the boundary between a word character and a non-word character)

For example, the pattern /^hello/ matches the word "hello" only if it appears at the beginning of a line or string.

Groups and capturing

Groups allow you to match a sequence of characters as a single unit. You can also capture the matched text and use it in a replacement string.

To create a group, enclose the pattern in parentheses (). For example, the pattern /(hello)+/ matches one or more occurrences of the word "hello".

To capture the matched text, use a backslash followed by a number to refer to the group. For example, the replacement string "-$1-" inserts a hyphen before and after the captured text.

Here's an example:

Alternation

Alternation allows you to match one of several patterns. To use alternation, separate the patterns with the | symbol. For example, the pattern /(cat|dog)/ matches either the word "cat" or the word "dog".

Lookahead and lookbehind

Lookahead and lookbehind allow you to match a pattern only if it is followed by or preceded by another pattern, respectively.

Lookahead uses the syntax (?=pattern) to match the pattern only if it is followed by another pattern. For example, the pattern /hello(?= world)/ matches the word "hello" only if it is followed by the word "world".

Lookbehind uses the syntax `(?<=pattern)` to match the pattern only if it is preceded by another pattern. For example, the pattern `/(?<=hello )world/` matches the word "world" only if it is preceded by the word "hello".

Note that not all browsers support lookbehind.

Flags

Flags modify the behavior of a regular expression. They are placed after the second forward slash.

Here are some common flags:

1. g (global) matches all occurrences of the pattern, not just the first one
2. i (case insensitive) matches the pattern regardless of case
3. m (multiline) treats the string as multiple lines, allowing ^ and $ to match at the beginning and end of each line, respectively
4. s (dotall) allows . to match newline characters as well

For example, the pattern /hello/g matches all occurrences of the word "hello" in a string.

Playgrounds to practice regex online:

Regex101: This website allows you to enter your regular expression and test it against a sample text. It also provides a detailed breakdown of the matches and captures.

RegExr: This website provides a real-time editor that allows you to create and test regular expressions against a sample text. It also provides a cheat sheet and quick reference guide.

RegexPal: This website is a simple online regex tester that allows you to enter your regular expression and test it against a sample text. It provides a detailed breakdown of the matches and captures.

Debuggex: This website provides an interactive regex editor that allows you to visualize your regular expression as you build it. It also provides a detailed breakdown of the matches and captures.

Regular Expressions 101: This website provides a simple interface for testing regular expressions against a sample text. It also provides a cheat sheet and quick reference guide.

Conclusion

JavaScript regular expressions are a powerful tool for working with text. They allow you to search, replace, and manipulate text based on patterns. By mastering the basic syntax and gradually moving on to more advanced topics, you can become proficient in using regular expressions to solve a wide range of text processing problems.