DEV Community

Cover image for Regular Expressions Cheat Sheet PART - 1
Burak Boduroğlu
Burak Boduroğlu

Posted on

Regular Expressions Cheat Sheet PART - 1

Regular expressions are a powerful tool for matching patterns in text. This blog post will introduce some of the basic syntax for regular expressions and how to use them in JavaScript.

Creating a Regular Expression

There are two ways to create a regular expression in JavaScript. The first is to use the RegExp constructor:

let text = "Programming is my favorite thing to do in the world.";

let regex1 = new RegExp("Programming");
let regex2 = /Programming/;

// .test()
console.log(regex1.test(text)); // true
console.log(regex2.test(text)); // true

// .exec()
console.log(regex1.exec(text)); // ["Programming", index: 0, input: "Programming is my favorite thing to do in the world."]
console.log(regex2.exec(text)); // ["Programming", index: 0, input: "Programming is my favorite thing to do in the world."]

// .match()
console.log(text.match(regex)); // ["Programming", index: 0, input: "Programming is my favorite thing to do in the world."]

// .search()
console.log(text.search(regex)); // 0

// .replace()
console.log(text.replace(regex, "Coding")); // Coding is my favorite thing to do in the world.

// .split()
console.log(text.split(regex)); // ["", " is my favorite thing to do in the world."]

// /\s/
console.log(text.split(/\s/)); // ["Programming", "is", "my", "favorite", "thing", "to", "do", "in", "the", "world."]
Enter fullscreen mode Exit fullscreen mode

.test() returns a boolean value indicating whether or not the regular expression matches the text.
.exec() returns an array containing the matched text, the index of the match, and the input string.
.match() returns an array containing the matched text, the index of the match, and the input string.
.search() returns the index of the first match.
.replace() returns a new string with the matched text replaced by the second argument.
.split() returns an array of strings split at the matched text.
/\s/ is a regular expression that matches whitespace characters.

exec and match are the same, but match is a string method and exec is a RegExp method.

Flags

Regular expressions can also have flags. Flags are added to the end of the regular expression and change the behavior of the regular expression. Usage of flags is demonstrated below:

  • /pattern/flags
  • new RegExp("pattern", "flags")

Flags

  • g - global, match all instances of the pattern
  • i - ignore case, match regardless of case
  • m - multiline, match across multiple lines
let text = "Programming is my favorite thing to do in the world.";
let regex1 = /o\s/;

console.log(text.match(regex1)); // ["o ", index: 13, input: "Programming is my favorite thing to do in the world."]

let regex2 = /o\s/g;

console.log(text.match(regex2)); // ["o ", "o "]

let regex3 = /G\s/gi;

console.log(text.match(regex3)); // ["g ", "g "]
Enter fullscreen mode Exit fullscreen mode

Explanation of the above code:

  • regex1 matches the first instance of the pattern.
  • regex2 matches all instances of the pattern.
  • regex3 matches all instances of the pattern regardless of case.

Recommended Resources

Regex Pal is a great tool for testing regular expressions: https://www.regexpal.com/

Wildcards

Wildcards are characters that match any character. The wildcard character is .. The following example demonstrates the use of the wildcard character:

let text = "Programming is my favorite thing to do in the world.";
let regex1 = /w.r/g;

console.log(text.match(regex1)); // ["wor"]

let regex2 = /w\./gi;

console.log(text.match(regex2)); // ["w."]
Enter fullscreen mode Exit fullscreen mode

Explanation of the above code:

  • regex1 matches any character between w and r.
  • regex2 matches any character between w and ..
let text = "He is holding his hat in his hand.";
let regex1 = /h../g;

console.log(text.match(regex1)); // ["hol", "his", "hat", "his", "han"]

let regex2 = /h../gi;

console.log(text.match(regex2)); // ["He ", "hol", "his", "hat", "his", "han"]
Enter fullscreen mode Exit fullscreen mode

Control Characters

  • \t is a tab character
  • \n is a newline character
  • \r is a carriage return character
  • \v is a vertical tab character

Using Character Sets

let text1 = "Gray, Grey, Grab";
let regex1 = /Gr[ae]y/g;

console.log(text.match(regex1)); // ["Gray", "Grey"]

let text2 = "Programming is my favorite thing to do in the world.";
let regex2 = /[aei][ w]/g;

console.log(text2.match(regex2)); // "e " -> from "favorite", "e " -> from "the"
Enter fullscreen mode Exit fullscreen mode

Specifying Ranges

let text1 = "1 11 a b c abc";
let regex1 = /[1-6a-z]/g;

console.log(text1.match(regex1)); // ["1", "1", "a", "b", "c", "a", "b", "c"]

let text2 = "13-20";
let regex2 = /[10-20]/;

console.log(text2.match(regex2)); // ["1","2","0"]
Enter fullscreen mode Exit fullscreen mode

Excluding a Character Set

let text1 = "1 2 33 123 12 93 85 abcd";
let regex1 = /[^0-9]/;

console.log(text1.match(regex1)); //  a b c d and all spaces
Enter fullscreen mode Exit fullscreen mode

Shorthand of Character Set

  • \d -> [0-9]
  • \w -> [a-zA-Z0-9_]
  • \s -> [ \t\r\n]
let text1 = "1 2 33 123 12 93 85 abcd";
let regex1 = /\d/g;

console.log(text1.match(regex1)); // ["1", "2", "3", "3", "1", "2", "9", "3", "8", "5"]

let text2 = "Programming is my favorite thing to do in the world.";
let regex2 = /\w/g;

console.log(text2.match(regex2)); // ["P", "r", "o", "g", "r", "a", "m", "m", "i", "n", "g", "i", "s", "m", "y", "f", "a", "v", "o", "r", "i", "t", "e", "t", "h", "i", "n", "g", "t", "o", "d", "o", "i", "n", "t", "h", "e", "w", "o", "r", "l", "d"]

let text3 = "Programming is my favorite thing to do in the world.";
let regex3 = /\s/g;

console.log(text3.match(regex3)); // [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
Enter fullscreen mode Exit fullscreen mode
  • \D -> [^0-9]
  • \W -> [^a-zA-Z0-9_]
  • \S -> [^ \t\r\n]
let text1 = "1 2 33 123 12 93 85 abcd";
let regex1 = /\D/g;

console.log(text1.match(regex1)); // [" ", " ", " ", " ", " ", " ", " ", "a", "b", "c", "d"]
Enter fullscreen mode Exit fullscreen mode

Repetitions

  • * -> It used to match 0 or more times
  • + -> It used to match 1 or more times
  • ? -> It used to match 0 or 1 time

Greedy and Lazy Matching

Greedy matching is the default behavior of regular expressions. Greedy matching means that the regular expression will match as many characters as possible. Lazy matching means that the regular expression will match as few characters as possible.

let html = "<h1>Heading</h1><p>Paragraph</p>";
let h1Regex = /<h1>.*<\/h1>/;

console.log(html.match(h1Regex)); // ["<h1>Heading</h1>"]
Enter fullscreen mode Exit fullscreen mode

Specifying the Repetition Amount

  • {n} -> It used to match exactly n times
  • {n,} -> It used to match at least n times
  • {n,m} -> It used to match at least n times and at most m times
let text1 = "Programming is my favorite thing to do in the world.";
let regex1 = /\w{3,5}/g;

console.log(text1.match(regex1)); // ["Program", "ming", "favor", "ite", "thing", "world"]
Enter fullscreen mode Exit fullscreen mode

Example

  • Validate phone numbers, check to see if it matches these formats:
    • (nnn)-nnn-nnnn
    • nnn.nnn.nnnn
    • nnn-nnn-nnnn
    • nnnnnnnnnn
    • (nnn)nnnnnnn

Solution:

let phoneNumber = 555 - 444 - 3333;
let regex = /\(?\d{3}\)?-?\d{3}-?\d{4}/;

console.log(phoneNumber.match(regex));
Enter fullscreen mode Exit fullscreen mode

Explanation: /(?\d{3})?-?\d{3}-?\d{4}/

  • \(? -> It matches 0 or 1 time "("
  • \d{3} -> It matches exactly 3 times digit
  • \)? -> It matches 0 or 1 time ")"
  • -? -> It matches 0 or 1 time "-"
  • \d{3} -> It matches exactly 3 times digit
  • -? -> It matches 0 or 1 time "-"
  • \d{4} -> It matches exactly 4 times digit

If you have any recommendations or feedback, please feel free to reach out to me on comment. However Part-2 will be coming soon. Stay tuned.

Follow me on GitHub

GitHub

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Best regex cheatsheet I've ever come across:

RegEx

Collapse
 
burakboduroglu profile image
Burak Boduroğlu

Thank you. 👾