Character Classes in JavaScript

Introduction

Welcome to the third lesson of Regex Foundations: Matching Patterns! You've already made substantial progress: you have learned how to match literals and special characters, and then mastered quantifiers to control repetition. Now we're ready to tackle one of the most versatile and practical features of regular expressions: character classes. So far, we've used metacharacters like the dot (.) to match any single character, and shorthand notations like \d for digits. While these tools are powerful, they're sometimes too broad or too narrow for specific tasks. What if we need to match only vowels? Or only hexadecimal digits? Or any character except quotes? Character classes give us precise control over which characters we want to match at each position in our pattern. In this lesson, we'll explore how to define custom character sets using square brackets, use ranges to write concise patterns, and leverage shorthand classes for common character types. We'll also discover negated character classes, which match everything except specified characters. By combining these techniques with the quantifiers we learned previously, we'll build patterns that can extract hex color codes, tokenize text, and parse structured data with elegance and efficiency.

Why Character Classes Matter

When working with real-world text, we often encounter situations where we need more precision than "any character" but more flexibility than a specific literal. Consider validating a hexadecimal color code like #FF5733 . We need to match characters that are digits (0-9) or letters (A-F or a-f), but nothing else. The dot operator is too permissive (it would accept #ZZ5733), and listing every valid character individually would be cumbersome. Character classes solve this problem by letting us define sets of acceptable characters. Instead of writing separate alternatives for each possibility, we specify a group of characters within square brackets. The regex engine then matches any single character from that set. This approach combines precision with conciseness, allowing us to express complex matching requirements in compact patterns. Beyond custom sets, we frequently need to match standard categories like digits, word characters, or whitespace. Rather than defining these common sets repeatedly, regex provides shorthand character classes: compact notations that represent frequently used character groups. These shorthands not only save typing but also make patterns more readable and maintainable.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Comparing Shorthands to Manual Classes

Let's examine how the \w shorthand compares to its manual equivalent by tokenizing text. Tokenization (splitting text into meaningful units like words) is a fundamental text-processing task, and \w+ provides a compact way to extract word-like tokens.

JavaScript

function findWords(text) {
  // Tokenize using shorthand \w+ (one or more word characters, ASCII)
  const wordsShorthand = text.match(/\w+/g) || [];
  // Compare to manual character class
  const wordsManual = text.match(/[A-Za-z0-9_]+/g) || [];
  return { wordsShorthand, wordsManual };
}

const sampleText = "Tokens: hello_world, Café42, tabs\tand spaces!";
const { wordsShorthand, wordsManual } = findWords(sampleText);
console.log(wordsShorthand);
console.log(wordsManual);

function findWords(text) {
  // Tokenize using shorthand \w+ (one or more word characters, ASCII)
  const wordsShorthand = text.match(/\w+/g) || [];
  // Compare to manual character class
  const wordsManual = text.match(/[A-Za-z0-9_]+/g) || [];
  return { wordsShorthand, wordsManual };
}

const sampleText = "Tokens: hello_world, Café42, tabs\tand spaces!";
const { wordsShorthand, wordsManual } = findWords(sampleText);
console.log(wordsShorthand);
console.log(wordsManual);

Both patterns use the + quantifier to match one or more word characters, capturing complete tokens rather than individual characters. In JavaScript, \w is exactly equivalent to [A-Za-z0-9_]—both match only ASCII letters, digits, and underscores. The shorthand \w+ is simply more concise and conventional, making your patterns easier to read and write.

text

[ 'Tokens', 'hello_world', 'Caf', '42', 'tabs', 'and', 'spaces' ]
[ 'Tokens', 'hello_world', 'Caf', '42', 'tabs', 'and', 'spaces' ]

[ 'Tokens', 'hello_world', 'Caf', '42', 'tabs', 'and', 'spaces' ]
[ 'Tokens', 'hello_world', 'Caf', '42', 'tabs', 'and', 'spaces' ]

The outputs are identical because both patterns match the same set of characters. Notice how both split Café42 into Caf and 42 because the accented character é falls outside the ASCII range that \w and [A-Za-z0-9_] cover. This demonstrates an important characteristic of JavaScript regex: the \w shorthand is limited to ASCII characters. When working with international text containing accented letters or characters from non-Latin alphabets, you may need to define custom character classes or use alternative approaches to capture those characters.

Introduction

Why Character Classes Matter

Join the 1M+ learners on CodeSignal

Defining Custom Character Sets

Using Ranges for Efficiency

Combining Ranges and Case Sensitivity

Practical Application: Extracting Hex Codes

Shorthand Character Classes

Comparing Shorthands to Manual Classes

Negated Character Classes

Matching Content Between Delimiters

Conclusion and Next Steps