A beginner's guide to regular expressions in JavaScript

Everyone who uses JavaScript has to deal with strings at some point. Sometimes you just store the string in another variable and pass it around. Other times you have to inspect it and see if it contains a specific substring.

However, things are not always easy. Sometimes you are not looking for a specific substring, but rather a set of substrings that follow a specific pattern.

Suppose you have to replace all occurrences of "Apples" in a string with "apples". You can simply use theMainString.replace("Apples", "apples"). Good and easy.

Now assume you also have to replace "appLes" with "apples". Likewise, "appLES" should become "apples". Basically, all case variations of "Apple" need to be changed to "apple". In this case, passing a simple string as an argument is no longer practical or efficient.

This is where regular expressions come in - you can simply use the case-insensitive flag i and be done with it. With this flag, it doesn't matter whether the original string contains "Apples", "APPles", "ApPlEs", or "Apples". Every instance of the word will be replaced with "apples".

Just like the case-insensitive flag, regular expressions provide many other features, which this tutorial will cover.

Using regular expressions in JavaScript

You must use slightly different syntax to indicate regular expressions within different String methods. Unlike a simple string enclosed in quotes, a regular expression consists of a pattern enclosed between slashes. Any flags you use in the regular expression will be appended after the second slash.

Back to the previous example, here's what the replace() method looks like using regular expressions and simple strings.

"I ate Apples".replace("Apples", "apples");
// I ate apples

"I ate Apples".replace(/Apples/i, "apples");
// I ate apples

"I ate aPPles".replace("Apples", "apples");
// I ate aPPles

"I ate aPPles".replace(/Apples/i, "apples");
// I ate apples

As you can see, the regular expression works in both cases. We will now learn more about the flags and special characters that make up patterns within regular expressions.

Backslashes in regular expressions

You can convert normal characters to special characters by adding a backslash before them. Likewise, you can convert special characters to normal characters by adding a backslash before them.

For example, d is not a special character. However, \d is used to match numeric characters in a string. Likewise, D is not a special character, but \D is used to match non-numeric characters in a string.

Numeric characters include 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9. When you use \d in a regular expression, it will match any of the following nine characters. When you use \D in a regular expression, it will match all non-numeric characters.

The following example should make things clear.

"L8".replace(/\d/i, "E");
// LE

"L8".replace(/\D/i, "E");
// E8

"LLLLL8".replace(/\D/i, "E");
// ELLLL8

You should note that in the third case, only the first matching character is replaced. You can also use flags to replace all matches. We will learn about such flags later.

Just like \d and \D, there are other special character sequences.

1. You can use \w to match any "word" character in a string. Here, word characters refer to A-Z, a-z, 0-9, and _. So basically, it will match all numbers, all lowercase and uppercase letters, and underscores.
2. You can use \W to match any non-word character in a string. It will match characters like %, $, #, $, etc.
3. You can use \s to match a single whitespace character, which includes space, tab, formfeed, and newline characters. Likewise, you can use \S to match all other characters except spaces.
4. You can also use \f, \n, \r, \t and \v , representing page feed, line feed, carriage return, horizontal tab and vertical tab respectively.

Sometimes you'll encounter a situation where you need to replace a word with an alternative, but only if it is not part of a larger word. For example, consider the following sentences:

"There are tons of pineapple pictures posted on the app."

In this example, we want to replace the word "app" with "board". However, using a simple regex pattern would turn "apple" into "boardle" and the final sentence would become:

"There are many pine board images posted on the app".

在这种情况下，您可以使用另一个特殊字符序列：\b。这会检查单词边界。单词边界是通过使用任何非单词字符（如空格、“$”、“%”、“#”等）形成的。不过请注意，它还包括重音字符，如“ü”。

"A lot of pineapple images were posted on the app".replace(/app/, "board");
// A lot of pineboardle images were posted on the app

"A lot of pineapple images were posted on the app".replace(/\bapp/, "board");
// A lot of pineapple images were posted on the board

同样，您可以使用 \B 来匹配非单词边界。例如，您可以使用 \B 仅匹配位于另一个单词（如“pineapple”）内的“app”。

匹配模式“n”次

您可以使用 ^ 告诉 JavaScript 仅查看字符串的开头以进行匹配。同样，您可以使用 $ 仅查看字符串末尾的匹配项。

您可以使用 * 来匹配前面的表达式 0 次或多次。例如，/Ap*/ 将匹配 A、Ap、App、Appp，等等。

"Apppppples".replace(/Ap*/, "App");
// Apples

"Ales".replace(/Ap*/, "App");
// Apples

"Appppples".replace(/Ap{2}/, "Add");
// Addppples

"Appppples".replace(/Ap{2,}/, "Add");
// Addles

"Appppples".replace(/Ap{2,4}/, "Add");
// Addples

"I like Apple".replace(/(\w{5,})/, '$1s');
// I like Apples

"I like Banana".replace(/(\w{5,})/, '$1s');
// I like Bananas

"I am looking for John and Jason".replace(/(\w+)\sand\s(\w+)/, '$2 and $1');
// I am looking for Jason and John

"I ate apples, you ate apples".replace(/apples/, "mangoes");
// "I ate mangoes, you ate apples"

"I ate apples, you ate apples".replace(/apples/g, "mangoes");
// "I ate mangoes, you ate mangoes"

"I ate apples, you ate APPLES".replace(/apples/, "mangoes");
// "I ate mangoes, you ate APPLES"

"I ate apples, you ate APPLES".replace(/apples/gi, "mangoes");
// "I ate mangoes, you ate mangoes"


var stickyRegex = /apples/y;
stickyRegex.lastIndex = 3;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 6;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate mangoes, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 8;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"