Just Learn Code

Mastering Regular Expression Patterns in JavaScript: A Cheatsheet and Techniques for String Splitting

Regular expressions are a powerful tool for manipulating and analyzing text data in many programming languages, including JavaScript. In this article, we’ll explore some techniques for splitting a string by a regular expression in JavaScript, as well as provide a cheatsheet of common regular expression patterns.

Splitting a String by a Regex in JavaScript

The String.split() method is a convenient way to divide a string into an array of substrings based on a given delimiter. The delimiter can be a character, a string, or a regular expression.

When using a regular expression as the delimiter, we can split a string more flexibly and precisely. The first parameter of the String.split() method is a separator, which can be a string or a regular expression.

For example, to split a sentence into words, we can use a space character as the separator:

“`

const sentence = ‘The quick brown fox jumps over the lazy dog’;

const words = sentence.split(‘ ‘);

console.log(words);

// Output: [“The”, “quick”, “brown”, “fox”, “jumps”, “over”, “the”, “lazy”, “dog”]

“`

To split a string by a regular expression, we can use a pattern as the separator. A pattern is a sequence of characters and metacharacters that define a search pattern.

For example, to split a string by a comma followed by zero or more whitespace characters, we can use the following regular expression:

“`

const csv = ‘Apple, Banana , Cherry ,Durian’;

const items = csv.split(/,s*/);

console.log(items);

// Output: [“Apple”, “Banana”, “Cherry”, “Durian”]

“`

In this example, the regular expression /,s*/ matches a comma (,), followed by zero or more whitespace characters (s*). This pattern matches all the places where a delimiter occurs, regardless of the number of whitespace characters after it.

Another useful technique for splitting a string by a regular expression is to use a character class. A character class is a set of characters enclosed in square brackets ([ ]).

For example, to split a string by any punctuation character, we can use the following pattern:

“`

const text = ‘The quick, brown. fox jumped: over the lazy dog!’;

const tokens = text.split(/[^w’]+/)

console.log(tokens);

// Output: [“The”, “quick”, “brown”, “fox”, “jumped”, “over”, “the”, “lazy”, “dog”]

“`

In this example, the regular expression /[^w’]+/ matches any sequence of one or more characters that is not a word character (w) or an apostrophe (‘), effectively removing all the punctuation characters.

Performing a Case-insensitive Match and Split

By default, regular expressions in JavaScript are case-sensitive. That means if we want to match a pattern, we need to ensure that the case of the pattern and the text being searched matches exactly.

However, sometimes we want to perform a case-insensitive match and split regardless of the letter case. To perform a case-insensitive match, we can use the “i” flag after the pattern.

For example:

“`

const text = ‘The Quick Brown FOX Jumps over the LAZY Dog!’;

const words = text.split(/s+/i);

console.log(words);

// Output: [“The”, “Quick”, “Brown”, “FOX”, “Jumps”, “over”, “the”, “LAZY”, “Dog!”]

“`

In this example, the regular expression /s+/i matches one or more whitespace characters (s) case-insensitively (i).

Removing Empty Strings from the Result

When splitting a string by a regular expression, we may end up with empty strings in the resulting array. For example, if we split a string by a comma followed by two whitespace characters, we’ll get the following result:

“`

const text = ‘Apple, , Banana, , Cherry’;

const items = text.split(/,s{2}/);

console.log(items);

// Output: [“Apple”, “”, “Banana”, “”, “Cherry”]

“`

In this example, the regular expression /,s{2}/ matches a comma followed by two whitespace characters.

Notice that the resulting array has two consecutive empty strings. To remove empty strings from the resulting array, we can use the Array.filter() method.

The Array.filter() method creates a new array with all the elements that pass the test implemented by the provided function. For example:

“`

const text = ‘Apple, , Banana, , Cherry’;

const items = text.split(/,s{2}/).filter(Boolean);

console.log(items);

// Output: [“Apple”, “Banana”, “Cherry”]

“`

In this example, we pass the Boolean function as the argument to Array.filter().

The Boolean function coerces each element to a Boolean value, effectively removing all the empty strings.

Regular Expression Cheatsheet by MDN

Regular expressions have a rich syntax that can be difficult to remember. To help you quickly recall common patterns and special characters, we’ve compiled a cheatsheet based on the MDN documentation.

Special Characters:

Character | Meaning | Example

——— | ——- | ——-

d | Matches any digit character. | /d+/ matches 123 and 3.14

w | Matches any word character (letter, digit, or underscore).

| /w{3}/ matches “foo” in “foobar”. s | Matches any whitespace character (space, tab, or newline).

| /s+w+/ matches ” bar” in ” foo bar”. .

| Matches any single character except newline (n). | /.*/ matches “hello” and “hellonworld”.

^ | Matches the beginning of a string or line. | /^foo/ matches “foo” in “foobar”.

$ | Matches the end of a string or line. | /bar$/ matches “bar” in “foobar”.

[] | Defines a character set. | /[aeiou]/ matches any vowel character.

[^] | Defines a negated character set. | /[^aeiou]/ matches any non-vowel character.

() | Groups a sequence of patterns together. | /(foo)+/ matches “foo”, “foofoo”, and “foofoofoo”.

| | Separates alternative patterns. | /foo|bar/ matches “foo” or “bar”.

Conclusion

Regular expressions are a powerful tool for manipulating and analyzing text data in JavaScript. By using the String.split() method with a regular expression as a separator, we can split a string more flexibly and precisely.

By applying the “i” flag to a regular expression, we can perform a case-insensitive match and split. By using the Array.filter() method, we can remove empty strings from the resulting array.

The cheatsheet we’ve provided can help you quickly recall common patterns and special characters. With practice, you can master regular expressions and become a more effective JavaScript programmer.

In conclusion, regular expressions are a powerful tool for manipulating and analyzing text data in JavaScript. The String.split() method with a regular expression as a separator allows for more flexible and precise string splitting, while the “i” flag enables case-insensitive match and split.

Removing empty strings from the resulting array can be done with the Array.filter() method. Regular expressions have a rich syntax that can be challenging to remember, but the provided cheatsheet can help recall common patterns and special characters.

By mastering regular expressions, JavaScript programmers can become more efficient and effective.

Popular Posts