How to Use Regex in JavaScript: A Beginner’s Guide

Hello everyone! Today I want to share with you about regex in JavaScript. Regex, short for regular expressions, are powerful tools for matching patterns in strings. They can help you validate input, extract data, replace text, and more. 

Below are the content I'm going to share with you. You can also click on them to directly jump to that section:

1. Creating a Regular Expression
2. Literal Characters
3. Special Characters
4. Character Sets
5. Alternation
6. Anchors
7. Lookahead and Lookbehind
8. Flags
9. String methods for Regex

Creating a Regular Expression:

Creating a Regular Expression is the process of defining a pattern that can be used to match specific strings or sets of characters within a larger body of text. In JavaScript, you can create a regular expression by enclosing a pattern between two forward slashes (/pattern/) or by using the RegExp() constructor.

For example, the regular expression /hello/ or RegExp('hello') can be used to match the string "hello" within a larger body of text. This pattern will match any occurrence of the string "hello", regardless of where it appears in the text.

Literal Characters

"Literal Characters" are characters that match themselves in a pattern. For example, if you use the regular expression /cat/ to match the string "The cat sat on the mat", it will match the letters "c", "a", and "t" in that order because they are the literal characters in the regular expression. Literal characters can include numbers, whitespace, and special characters like punctuation marks. If you want to match a literal character that has a special meaning in a regular expression, you can escape it using a backslash character \. For example, if you want to match a literal dot (.), which in a regular expression matches any single character, you can use the regular expression /\./.

Special Characters

The Special Characters topic in JavaScript Regular Expressions (Regex) refers to characters that have special meaning within a regular expression.Here's a list of special characters in JavaScript Regular Expressions (Regex):

• . (dot) - Matches any character except newline. Example: a.b matches any string that contains an "a" followed by any single character followed by "b".
• *(asterisk) - Matches the preceding element zero or more times. Example: ab*c matches "ac", "abc", "abbc", "abbbc", and so on.
• +(plus) - Matches the preceding element one or more times. Example: ab+c matches "abc", "abbc", "abbbc", and so on, but not "ac".
• ? (question mark) - Matches the preceding element zero or one time. Example: colou?r matches both "color" and "colour".
• {n} - Matches the preceding element exactly n times. Example: a{3} matches "aaa".
• {n,m} - Matches the preceding element at least n times, but no more than m times. Example: a{2,4} matches "aa", "aaa", and "aaaa".
• {n,} - Matches the preceding element at least n times. Example: a{2,} matches "aa", "aaa", "aaaa", and so on.
• | (pipe) - Matches either the expression before or after it. Example: cat|dog matches either "cat" or "dog".
• [] (brackets) - Defines a character set. Example: [abc] matches any of the characters "a", "b", or "c".
• () (parentheses) - Groups expressions and captures the match. Example: (ab)+ matches "ab", "abab", "ababab", and so on.
• \ (backslash) - Escapes the next character to indicate a literal character, or to define a special character or sequence.
• \d - Matches any digit character (equivalent to [0-9]). Example: \d+ matches one or more digits.
• \w - Matches any word character (equivalent to [a-zA-Z0-9_]). Example: \w+ matches one or more letters, digits, or underscores.
• \s - Matches any whitespace character. Example: \s+ matches one or more spaces, tabs, or line breaks.
• \D - Matches any non-digit character (equivalent to [^0-9]). Example: \D+ matches one or more non-digits.
• \W - Matches any non-word character (equivalent to [^a-zA-Z0-9_]). Example: \W+ matches one or more non-letters, non-digits, and non-underscores.
• \S - Matches any non-whitespace character. Example: \S+ matches one or more non-space, non-tab, and non-line break characters.
• \b - Matches a word boundary. Example: \bcat\b matches the word "cat" only when it appears as a separate word, not as part of another word.
• \B - Matches a non-word boundary. Example: \Bcat\B matches the word "cat" only when it appears as part of another word, not as a separate word.
• \n - Matches a newline character. Example: foo\nbar matches "foo" followed by a newline character and then "bar".

Character Sets

Character Sets are a way to match a single character from a specified set of characters. For example, if you want to match any vowel, you can use the character set [aeiou]. This will match any of the letters a, e, i, o, or u in the string. You can also use a hyphen to specify a range of characters, such as [a-z] for any lowercase letter, [A-Z] for any uppercase letter, [0-29] for number between 0 to 2, 9 or [0-9] for any digit.

Also [^aeiou] will match any of the letters apart from a, e, i, o, or u in the string.

^- indicates not operation

Alternation

Alternation is a feature in regular expressions that allows you to match one pattern or another. It is denoted by the vertical bar | symbol.

For example, the regular expression /cat|dog/ would match either the string "cat" or the string "dog".

Anchors

Anchors are special characters that allow you to match specific positions within the input string. There are two types of anchors in regex:

1. The caret (^) anchor: This matches the beginning of the input string or the beginning of a line if the multiline flag is enabled. For example, the regex /^Hello/ will match any string that starts with the word "Hello".

2. The dollar sign ($) anchor: This matches the end of the input string or the end of a line if the multiline flag is enabled. For example, the regex /World$/ will match any string that ends with the word "World".

For example, /^Hello World$/: This will match only the string "Hello World".

Lookahead and Lookbehind

Lookahead and Lookbehind are advanced features of regular expressions in JavaScript that allow you to match a pattern only if it is followed by or preceded by another pattern, without including the other pattern in the match.

Lookahead is a zero-width assertion that matches a group of characters only if they are followed by another group of characters. Lookahead is represented by (?=pattern) syntax, where pattern is the group of characters to be matched.

For example, the regex /foo(?=bar)/ will match foo only if it is followed by bar. So, it will match foobar but not foobazbar.

Lookbehind is similar to lookahead, but it matches a group of characters only if they are preceded by another group of characters. Lookbehind is represented by (?<=pattern) syntax, where pattern is the group of characters to be matched.

For example, the regex /(?<=foo)bar/ will match bar only if it is preceded by foo. So, it will match foobar but not bazbar.

It's worth noting that lookbehind is not supported in all browsers and environments, so it's important to test your regular expressions thoroughly if you use this feature.

Flags

Flags are used to modify the behavior of a regular expression. They are placed after the closing delimiter of the regular expression and change the way the pattern is matched.

Here are the commonly used flags in JavaScript:

1. g (global) - This flag is used to match all occurrences of a pattern, rather than just the first one.

2. i (ignore case) - This flag is used to make the pattern matching case-insensitive.

3. m (multiline) - This flag is used to make the pattern matching work across multiple lines, allowing the ^ and $ anchors to match the beginning and end of each line, rather than just the beginning and end of the entire string.

For example, /hello/gi would match all occurrences of "hello" in a case-insensitive manner

String methods

Here are several string methods that work with regular expressions:

search(): Searches a string for a specified value or regular expression and returns the index of the match.

replace(): Searches a string for a specified value or regular expression and replaces the match with a new substring.

match(): Searches a string for a specified value or regular expression and returns an array of matches.

split(): Splits a string into an array of substrings based on a specified separator or regular expression.

test(): Searches a string for a specified value or regular expression and returns true or false indicating whether the match was found.

Examlpe,

const str = "The quick brown fox jumps over the lazy dog";

//serach

const pattern1 = /fox/;

const index = str.search(pattern1); // returns 16

//match

const pattern2 = /the/gi;

const matches = str.match(pattern2); // returns ["The", "the"]

//test

const pattern3 = /fox/;

const isMatch = pattern3.test(str); // returns true

//Replace

const str1 = "Visit Microsoft!";

const pattern4 = /Microsoft/;

const newStr = str1.replace(pattern4, "Google"); // returns "Visit Google!"

//Split

const str2 = "apple, banana, cherry";

const pattern5 = /,\s*/;

const arr = str2.split(pattern5); // returns ["apple", "banana", "cherry"]

I want to share with you a great tool for learning and testing regular expressions: https://regexr.com/