DEV Community

Cover image for The Regex Cheat Sheet for JavaScript Developers
Sohanur Rahman Emon
Sohanur Rahman Emon

Posted on

The Regex Cheat Sheet for JavaScript Developers

Regex (Regular Expressions) are powerful tools for pattern matching and text manipulation. They provide a concise and flexible way to describe complex search patterns. In this cheat sheet, we'll cover essential regex concepts with practical examples for JavaScript developers.

Anchors

Anchors are used to specify the position in the string where a match must occur.

const startOfString = /^regex/;
const endOfString = /pattern$/;
const wordBoundary = /\bword\b/;
Enter fullscreen mode Exit fullscreen mode
  • ^: Matches the start of the string.
  • $: Matches the end of the string.
  • \b: Matches a word boundary.

Example:

console.log(startOfString.test('regex example')); // true
console.log(endOfString.test('example pattern')); // true
console.log(wordBoundary.test('word boundary')); // true
Enter fullscreen mode Exit fullscreen mode

Character Classes

Character classes define sets of characters to match.

const digitClass = /\d/;
const notWhiteSpace = /\S/;
const hexDigit = /\x1F/;
Enter fullscreen mode Exit fullscreen mode
  • \d: Matches any digit.
  • \S: Matches any non-whitespace character.
  • \x: Matches a hexadecimal character.

Example:

console.log(digitClass.test('abc123')); // true
console.log(notWhiteSpace.test('no whitespace')); // true
console.log(hexDigit.test('hex 1F')); // true
Enter fullscreen mode Exit fullscreen mode

Quantifiers

Quantifiers define the number of occurrences of a character or group.

const zeroOrMore = /a*/;
const oneOrMore = /b+/;
const threeOrMore = /c{3,}/;
Enter fullscreen mode Exit fullscreen mode
  • *: Matches 0 or more occurrences.
  • +: Matches 1 or more occurrences.
  • {3,}: Matches 3 or more occurrences.

Example:

console.log(zeroOrMore.test('aaa')); // true
console.log(oneOrMore.test('bb')); // true
console.log(threeOrMore.test('cccc')); // true
Enter fullscreen mode Exit fullscreen mode

Escape Sequences

Escape sequences are used to match special characters literally.

const escapeChar = /\//;
const literalSequence = /\Qspecial\E/;
Enter fullscreen mode Exit fullscreen mode
  • /: Matches a literal '/'.
  • \Q...\E: Matches the literal sequence between \Q and \E.

Example:

console.log(escapeChar.test('a/b')); // true
console.log(literalSequence.test('special word')); // true
Enter fullscreen mode Exit fullscreen mode

Groups and Ranges

Groups and ranges help organize and match sets of characters.

const anyCharacter = /./;
const aOrB = /(a|b)/;
const nonCapturingGroup = /(?:x|y)/;
const rangeABC = /[a-c]/;
const notABC = /[^a-c]/;
Enter fullscreen mode Exit fullscreen mode
  • .: Matches any character except newline.
  • (a|b): Matches 'a' or 'b'.
  • (?:x|y): Non-capturing group.
  • [a-c]: Matches 'a', 'b', or 'c'.
  • [^a-c]: Matches any character except 'a', 'b', or 'c'.

Example:

console.log(anyCharacter.test('a\nb')); // true
console.log(aOrB.test('a')); // true
console.log(nonCapturingGroup.test('x')); // true
console.log(rangeABC.test('b')); // true
console.log(notABC.test('d')); // true
Enter fullscreen mode Exit fullscreen mode

Special Characters

Special characters represent common characters.

const newLine = /\n/;
const tab = /\t/;
const hexChar = /\x1A/;
Enter fullscreen mode Exit fullscreen mode
  • \n: Matches a newline character.
  • \t: Matches a tab character.
  • \x: Matches a hexadecimal character.

Example:

console.log(newLine.test('line\nbreak')); // true
console.log(tab.test('indented\tline')); // true
console.log(hexChar.test('\x1A')); // true
Enter fullscreen mode Exit fullscreen mode

Pattern Modifiers

Modifiers affect how the pattern is applied.

const globalMatch = /pattern/g;
const caseInsensitive = /case/i;
const multiLine = /^start/m;
const singleLine = /line$/s;
const commentsWhitespace = /pattern/x;
Enter fullscreen mode Exit fullscreen mode
  • g: Global match.
  • i: Case-insensitive.
  • m: Multiple lines.
  • s: Treats the string as a single line.
  • x: Allows comments and whitespace in the pattern.

Example:

console.log(globalMatch.exec('pattern pattern')); // ['pattern', 'pattern']
console.log(caseInsensitive.test('CaseInsensitive')); // true
console.log(multiLine.test('start\nline')); // true
console.log(singleLine.test('multi\nline')); // true
console.log(commentsWhitespace.test('pattern with spaces')); // true
Enter fullscreen mode Exit fullscreen mode

Assertions

Assertions define conditions for a match without consuming characters.

const lookaheadAssertion = /foo(?=bar)/;
const negativeLookahead = /foo(?!bar)/;
const lookbehindAssertion = /(?<=foo)bar/;
const negativeLookbehind = /(?<!foo)bar/;
Enter fullscreen mode Exit fullscreen mode
  • (?=bar): Lookahead assertion.
  • (?!bar): Negative lookahead.
  • (?<=foo)bar: Lookbehind assertion.
  • (?<!foo)bar: Negative lookbehind.

Example:

console.log(lookaheadAssertion.test('foobar')); // true
console.log(negativeLookahead.test('foo123')); // true
console.log(lookbehindAssertion.test('foobar')); // true
console.log(negativeLookbehind.test('123bar')); // true
Enter fullscreen mode Exit fullscreen mode

In conclusion, mastering regular expressions is a valuable skill for any JavaScript developer. This cheat sheet covers essential regex concepts and provides practical examples for better understanding. Use it as a quick reference when crafting powerful search patterns in your JavaScript projects.

Top comments (1)

Collapse
 
tracygjg profile image
Tracy Gilmore

Hi Sohanur, Three rules I try to apply when using Regular Expressions.
1) Top and tail with ^ and $ whenever possible.
2) Try to limit repetition by replacing + with {1,n} and * with {0,n}, where a reasonable value for n can be determined.
3) Test, test and test some more.

Test all the positive case, as many negative cases as you can devise and test all possible edge cases.