Backreferences in JavaScript

Introduction

Welcome back to Extracting Data with Capture Groups in JavaScript! You've now completed the first lesson of this course, and you're building impressive skills in regex-based data extraction. In the previous lesson, you mastered named capture groups : a feature that lets you extract structured data with meaningful names like year, month, and day instead of cryptic numeric indices. You built a date parser that returns clean objects and handles invalid input gracefully. This was a major step forward, transforming regex from a pattern matcher into a data extraction tool. Today, we're exploring another powerful feature that works hand in hand with capture groups: backreferences . While named groups let you extract and retrieve matched text, backreferences let you reuse that captured text within the same pattern. This opens up entirely new pattern-matching capabilities. You'll be able to find repeated words in text, match paired delimiters like HTML tags, and enforce consistency across different parts of a pattern. These skills are essential for tasks like detecting duplicated text, parsing structured formats, and validating patterns with internal consistency requirements. This lesson will show you two compelling applications of backreferences. First, we'll find consecutive repeated words in text, catching common writing errors where words like "the the" appear accidentally. Second, we'll extract content from matched HTML-style tags, ensuring that opening and closing tags correspond correctly. Both examples demonstrate how backreferences enforce relationships between different parts of a pattern, something impossible with the regex tools you've learned so far. Let's begin by understanding the problem that backreferences solve.

The Challenge of Pattern Consistency

Consider two common text-processing scenarios that initially seem straightforward but reveal a subtle complexity. First, imagine you want to find words that appear twice in a row: "the the," "is is," or "no no." Your instinct might be to use a pattern like \b\w+\s+\w+\b, which matches two consecutive words. But this pattern matches any two words, not specifically repeated words. It would match "the cat" just as readily as "the the," giving you far too many false positives. Second, suppose you're extracting content from HTML-like tags: <title>Introduction</title>. You know how to match the opening tag <\w+>, the content [^<]+, and the closing tag <\/\w+>. But this pattern has a critical flaw: it would happily match <title>Introduction</span>, accepting mismatched tags. In real-world parsing, such mismatches indicate corrupted data that should be rejected, not extracted. Both scenarios share a fundamental requirement: one part of the pattern must match the exact same text as another part. We need a way to say, "match this word, then match that same word again," or "match this tag name, then match that same tag name in the closing tag." This is precisely what backreferences enable. They let you refer back to text captured by an earlier group, enforcing consistency within a single pattern.

Join the 1M+ learners on CodeSignal

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

Finding Repeated Words

Now we'll implement a function that finds all consecutively repeated words in a text. This is useful for proofreading, catching common typing errors, and analyzing text quality. The function uses backreferences to ensure we only capture truly duplicated words, not just any two consecutive words.

JavaScript

function findRepeatedWords(text) {
  const pattern = /\b(\w+)\s+\1\b/gi;
  const results = [];
  let match;
  while ((match = pattern.exec(text)) !== null) {
    // Capture group 1 contains the repeated word
    results.push(match[1]);
  }
  return results;
}

const s1 = "This is is a test. That that works. No no No no trick.";
console.log(findRepeatedWords(s1));

function findRepeatedWords(text) {
  const pattern = /\b(\w+)\s+\1\b/gi;
  const results = [];
  let match;
  while ((match = pattern.exec(text)) !== null) {
    // Capture group 1 contains the repeated word
    results.push(match[1]);
  }
  return results;
}

const s1 = "This is is a test. That that works. No no No no trick.";
console.log(findRepeatedWords(s1));

The findRepeatedWords function applies our backreference pattern to the input text. In JavaScript, we use the exec() method in a loop to find all matches. The exec() method returns a match object containing the full match and any captured groups, or null when no more matches are found. We access the captured group content through match[1], which contains the text captured by the first group. Even though our pattern matches "is is" in the text, we only push match[1] (just "is") to our results array. This is actually convenient: we get the repeated word itself, not the word plus its duplicate.

text

[ 'is', 'That', 'No', 'No' ]

[ 'is', 'That', 'No', 'No' ]

The output reveals something interesting. We found "is is" and returned "is." We found "That that" and returned "That" (note the case-insensitive matching due to the i flag). We also found "no no" twice and returned "No" both times. But wait: the text contains "No no No no," which appears to have four consecutive occurrences of the same word. Why did we only get two matches instead of three? This happens because regex matches are non-overlapping. After matching "No no," the engine continues from after that match, where it finds "No no" again as a separate match. The i flag makes the pattern case-insensitive, so "No" and "no" are treated as the same word.

Building the Tag Matching Pattern

Let's implement a function that extracts content from matching HTML-style tags. The pattern combines capture groups for both the tag name and content with a backreference to enforce tag consistency. Note that this pattern is designed for simple, non-nested tags — it cannot handle nested HTML structures like <p><b>bold</b></p>.

JavaScript

function extractTaggedContent(text) {
  // Backreference \1 ensures closing tag matches opening tag
  // [^<]+ matches content but explicitly forbids '<' characters
  const pattern = /<(\w+)>([^<]+)<\/\1>/g;
  const matches = [];
  let match;
  while ((match = pattern.exec(text)) !== null) {
    const tag = match[1];
    const content = match[2];
    matches.push([tag, content]);
  }
  return matches;
}

function extractTaggedContent(text) {
  // Backreference \1 ensures closing tag matches opening tag
  // [^<]+ matches content but explicitly forbids '<' characters
  const pattern = /<(\w+)>([^<]+)<\/\1>/g;
  const matches = [];
  let match;
  while ((match = pattern.exec(text)) !== null) {
    const tag = match[1];
    const content = match[2];
    matches.push([tag, content]);
  }
  return matches;
}

This pattern has three major parts. First, <(\w+)> matches an opening tag and captures the tag name in group 1. The tag name must consist of word characters (letters, digits, underscores). Second, ([^<]+) captures the content between tags in group 2. The negated character class [^<] matches any character except <, and the + quantifier ensures we match at least one character. This approach explicitly forbids any < characters in the content, which means the pattern stops at the first < it encounters. Third, <\/\1> matches a closing tag where \1 references the tag name captured in group 1. The forward slash is escaped as \/ because we're matching the literal characters </.

The function uses exec() in a loop to find all matches. Each match object contains the full match at match[0], the tag name at match[1], and the content at match[2]. We extract these values and push them as an array [tag, content] into our results. This gives us structured data showing exactly what tags were found and what content they contained.

Conclusion and Next Steps

Excellent work! You've now mastered backreferences, a powerful tool that extends regex beyond simple pattern matching to enforce internal consistency. In this lesson, you learned how backreferences let you reuse captured text within the same pattern using the \1, \2 syntax. You discovered two compelling applications: finding consecutively repeated words with /\b(\w+)\s+\1\b/gi and extracting content from matched HTML-style tags with /<(\w+)>([^<]+)<\/\1>/g. Both patterns demonstrate how backreferences create relationships between different pattern components, ensuring that text in one location matches text in another.

The key insight is that backreferences enforce textual identity, not pattern similarity. When you write (\w+)\s+\1, the second word must be exactly the same as the first, character for character (respecting any case-sensitivity flags). This is fundamentally different from writing (\w+)\s+(\w+), which captures two words that can be completely different. You also learned an important technique for controlling pattern behavior: using negated character classes like [^<]+ to explicitly stop at specific characters, giving you precise control over where matching ends — though with the trade-off that such patterns cannot handle content containing those forbidden characters.

These backreference patterns form essential building blocks for text processing tasks. Whether you're parsing log files, extracting structured data from simple markup, validating input formats, or detecting text errors, backreferences help you express matching requirements that would be impossible with simpler regex tools. Combined with the named groups you learned previously, you now have a comprehensive toolkit for extracting and validating structured text data.

In the next lesson, we'll shift focus to practical extraction patterns for common data types like emails, URLs, and prices. You'll learn how to combine character classes, quantifiers, anchors, and capture groups to build robust extractors for real-world data. But first, let's cement your understanding of backreferences through hands-on practice. The upcoming exercises will challenge you to fix common backreference mistakes, adapt patterns to new contexts like BBCode, find symmetrical phrasing in text, and make HTML extractors more flexible. Get ready to put these powerful patterns to work!

Introduction

The Challenge of Pattern Consistency

Join the 1M+ learners on CodeSignal

Understanding Backreferences

Basic Backreference Syntax

Finding Repeated Words

How the Backreference Pattern Works

Case Sensitivity in Backreferences

Matching Paired Delimiters

Building the Tag Matching Pattern

Understanding the Tag Extraction Pattern

Why This Pattern Uses a Negated Character Class

Viewing the Tag Extraction Results

Limitations of This Approach

Conclusion and Next Steps