Weather Clock Dash

Posted on Oct 16

Regex in Firefox: Named Groups, Unicode Support, and DevTools Debugging

#firefox #javascript #regex #webdev

Firefox's DevTools include regex testing capabilities, and Firefox's JavaScript engine has some regex-specific features worth knowing for developers. Here's a practical guide to regex debugging in Firefox.

Testing Regex in the Console

Firefox's DevTools Console is a fast regex sandbox:

// Test a regex interactively
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
regex.test('user@example.com')  // true
regex.test('not-an-email')      // false

// See all matches
'foo bar baz'.match(/\b\w+\b/g)  // ["foo", "bar", "baz"]

// Named capture groups (ES2018)
const date = '2024-01-15'.match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/);
date.groups  // {year: "2024", month: "01", day: "15"}

Console tip: Firefox's console auto-completes regex methods and shows the object returned by match() in an expandable tree view. Click the result to explore capture groups and named groups.

Firefox's Regex Flavor

Firefox uses SpiderMonkey's regex engine, which supports:

All ES2015+ regex features: named groups, lookbehind, Unicode mode
ES2018: Named capture groups ((?<name>...))
ES2018: Unicode property escapes (\p{Letter})
ES2018: Lookbehind assertions ((?<=...), (?<!...))
ES2020: String.prototype.matchAll()
ES2022: d flag (indices) for tracking match positions
ES2024: v flag (set notation)

// Named groups
const re = /(?<year>\d{4})-(?<month>\d{2})/;
const m = '2024-10'.match(re);
console.log(m.groups.year, m.groups.month);  // 2024 10

// Lookbehind
'$100'.match(/(?<=\$)\d+/)[0]  // "100" (matches digits preceded by $)

// Unicode property escapes
'café'.match(/\p{Letter}+/u)  // ["café"]

// matchAll() for all matches with groups
for (const m of '2024-01 and 2024-02'.matchAll(/(?<y>\d{4})-(?<m>\d{2})/g)) {
  console.log(m.groups.y, m.groups.m);
}

The Console Regex Debugger Trick

Firefox console has a built-in trick for visualizing regex matches — paste text then use exec() in a loop:

const regex = /(\w+)\s+(\w+)/g;
const text = 'foo bar baz qux';
let match;
while ((match = regex.exec(text)) !== null) {
  console.log(`Match: "${match[0]}" at index ${match.index}`);
  console.log(`  Group 1: "${match[1]}"`);
  console.log(`  Group 2: "${match[2]}"`);
}

Using Firefox Debugger to Trace Regex

When debugging code that uses regex, set a breakpoint on the line with the regex:

DevTools → Debugger
Open the file with the regex (Ctrl+P in Debugger to search files)
Click the line number to add a breakpoint
When the code runs, hover over the regex variable to see its value
Use the Console at the bottom of DevTools to test the regex against current variables

// In the paused state, you can test in Console:
regex.test(currentInput)
currentInput.match(regex)

String Search with Regex in DevTools

Inspector search: Ctrl+F in the Inspector panel searches the DOM with text. For regex search in the DOM, use the Console:

// Find all elements matching an attribute pattern
[...document.querySelectorAll('*')]
  .filter(el => /^data-user-/.test(el.getAttributeNames().join(' ')))
  .map(el => el.tagName + '#' + el.id);

Network filter: The Network panel's filter box does NOT support regex. Use the search box in the DOM panel instead.

Page source search: Ctrl+U opens page source. Ctrl+F in source view is plain text search, not regex.

Validating Regex Performance

Regex can cause catastrophic backtracking — O(n²) or worse performance on certain inputs. Test in Firefox console:

// Measure regex performance
const dangerousRegex = /^(a+)+$/;  // Catastrophic backtracking!
console.time('regex');
dangerousRegex.test('aaaaaaaaaaaaaaaaaaaaaaaaaaab');  // May hang
console.timeEnd('regex');

If the browser hangs: The regex is catastrophically backtracking. Firefox will eventually show a "slow script" dialog offering to kill the script.

Safe alternative patterns:

// DANGEROUS: nested quantifiers with overlapping options
/^(\d+)+$/    // O(n²) on certain inputs

// SAFE: possessive quantifiers (Firefox supports atomic groups workaround)
/^\d+$/       // O(n) — greedy without nested quantifiers

Regex with Unicode in Firefox

Firefox has excellent Unicode regex support:

// Without 'u' flag: character class treats surrogate pairs as two chars
/^.$/.test('😀')  // false (emoji is 2 code units)

// With 'u' flag: correct Unicode handling
/^.$/u.test('😀')  // true (emoji is 1 code point)

// Unicode property escapes with 'u' flag
/\p{Emoji}/u.test('😀')  // true
/\p{Script=Latin}/u.test('café')  // true
/\p{Script=Arabic}/u.test('مرحبا')  // true

Firefox-Specific Regex Debugging Notes

Error messages: Firefox's regex error messages are fairly clear:

SyntaxError: invalid regular expression flag s
SyntaxError: invalid identity escape in regular expression
SyntaxError: nothing to repeat

DotAll mode (s flag): Firefox 78+ supports the s flag for dotAll (. matches \n):

/hello.world/s.test('hello\nworld')  // true

Named backreferences:

// Named backreference in pattern
/(?<tag>\w+)\s+\k<tag>/.test('hello hello')  // true

Indices flag (d flag, Firefox 90+):

const match = 'hello'.match(/e(l+)/d);
console.log(match.indices);  // [[1,4], [2,4]] — start/end for each group

Quick Regex Reference for Firefox

Feature	Syntax	Firefox Version
Named groups	`(?<name>...)`	78+
Lookbehind	`(?<=...)`	78+
Unicode properties	`\p{Letter}` with `u` flag	78+
matchAll	`str.matchAll(regex)`	78+
DotAll flag	`/s`	78+
Indices flag	`/d`	90+
Set notation	`/v`	116+

All of these are testable immediately in Firefox's DevTools Console — just open F12 and start typing.

DEV Community