## Name your captures Numbered groups (`match[1]`, `match[2]`) are positional and fragile — insert a group and every index shifts. Named capture groups `(?\d{4})` land in `match.groups.year`, so your parsing code reads like the data it extracts and survives pattern edits. ## Iterate every match with matchAll `String.prototype.matchAll` returns an iterator of full match objects — each with its `index`, capture groups, and named `groups`. Unlike `String.replace` with a global flag, you get the whole match shape, and unlike `regex.exec` in a loop you don't manage `lastIndex` by hand. The regex must carry the `g` flag. ## Look around without consuming Lookbehind `(?<=...)` and lookahead `(?=...)` assert that text exists before or after the cursor without including it in the match. That makes them perfect for "the number after `$`" or "the digits before `kg`" — you match the payload, not the marker. ## The d flag: where, not just what The `d` (hasIndices) flag adds a `.indices` array to each match giving `[start, end]` offsets for the whole match and every group — including named ones under `indices.groups`. Use it when you need to highlight or splice the source text, not just read the captured value. ## Callbacks and capturing splits `replace`/`replaceAll` accept a function: it receives the match, each group, the offset, and the source, and returns the replacement — arbitrary logic per match, no template-string limits. And `split` with a regex that *captures* keeps the delimiters in the output array, so you can tokenise while preserving what you split on. ::example{slug="named-groups" title="Named capture groups" difficulty=intro} ```js const DATE = /(?\d{4})-(?\d{2})-(?\d{2})/ const m = '2026-06-19'.match(DATE) // Read by name instead of brittle numeric index. const { year, month, day } = m.groups console.log(`y=${year} m=${month} d=${day}`) // Named groups also power replacement templates via $. console.log('2026-06-19'.replace(DATE, '$/$/$')) ``` ```explain `m.groups` yields `{ year, month, day }` so `y=2026 m=06 d=19` reads straight from the names, and the `$` syntax reorders the parts into `19/06/2026` without a single numeric index. ``` :: ::example{slug="match-all" title="Iterating every match with matchAll" difficulty=working} ```js const text = 'lemon x3, ginger x12, mint x1' const ITEM = /(?\w+) x(?\d+)/g const items = [] for (const m of text.matchAll(ITEM)) { items.push({ name: m.groups.name, qty: Number(m.groups.qty), at: m.index }) } console.log(items) console.log('total qty:', items.reduce((a, i) => a + i.qty, 0)) ``` ```explain Each iteration hands back a full match object, so the array captures `name`, `qty`, and the source `at` offset (`0`, `10`, `22`) in one pass — summing the parsed quantities gives `total qty: 16`. ``` :: ::example{slug="lookbehind" title="Lookbehind: match the value, not the marker" difficulty=working} ```js const text = 'apples $4, pears $12 and bread $3' // (?<=\$) asserts a preceding '$' without capturing it. const prices = [...text.matchAll(/(?<=\$)\d+/g)].map(m => Number(m[0])) console.log('prices:', prices) console.log('total: ', prices.reduce((a, n) => a + n, 0)) // Lookahead works the same way on the trailing side. const weights = [...'5kg 200g 3kg'.matchAll(/\d+(?=kg)/g)].map(m => Number(m[0])) console.log('kg:', weights) ``` ```explain The `$` and `kg` markers stay out of the match, so `prices: [4,12,3]` and `kg: [5,3]` hold just the numbers — the lookahead even skips `200g`, since only digits directly before `kg` qualify. ``` :: ::example{slug="replace-callback" title="replaceAll with a function" difficulty=advanced} ```js const template = 'Hi {{name}}, you have {{count}} new messages' const data = { name: 'Ada', count: 3 } // The callback receives the full match then each capture group. const filled = template.replaceAll(/\{\{(\w+)\}\}/g, (whole, key) => key in data ? String(data[key]) : whole, ) console.log(filled) // Named groups arrive as a trailing object argument. const masked = 'card 4111-2222-3333-4444'.replace( /(?\d{4})-\d{4}-\d{4}-(?\d{4})/, (...args) => { const { lead, tail } = args.at(-1) return `${lead}-****-****-${tail}` }, ) console.log(masked) ``` ```explain The first callback fills the template to `Hi Ada, you have 3 new messages`; the second reads named groups off the trailing argument to mask the middle, yielding `card 4111-****-****-4444`. ``` :: ::example{slug="split-and-indices" title="Capturing split and the d (hasIndices) flag" difficulty=advanced} ```js // A capturing group in the split pattern keeps the delimiters. const tokens = '3 + 4 * 2'.split(/\s*([+*])\s*/) console.log(tokens) // The d flag adds .indices: [start, end) offsets per group. const re = /(?\w+)=(?\w+)/d const m = 'mode=dark'.match(re) console.log('value: ', m.groups.val) console.log('val span:', m.indices.groups.val) // Use the span to slice the original source precisely. const [start, end] = m.indices.groups.val console.log('sliced: ', 'mode=dark'.slice(start, end)) ``` ```explain The capturing split keeps the operators, giving `["3","+","4","*","2"]`; the `d` flag's `val span: [5,9]` then lets `slice(5, 9)` carve `dark` straight out of the source — locating, not just reading, the value. ``` ::