Why does /^cat|dog$/.test('hotdog') return true in JavaScript, and how do you write the pattern you probably meant?

## Precedence, stated plainly Regex syntax has an operator precedence just like arithmetic does, and `|` sits at the bottom of it. From tightest to loosest: 1. Escaped characters, character classes, groups — the atoms. 2. Quantifiers (`*`, `+`, `?`, `{n,m}`) — bind to the single preceding atom. 3. Concatenation — a sequence of atoms in a row. 4. Alternation `|` — splits everything else. So `/^cat|dog$/` parses as `(^cat)|(dog$)`, not as `^(cat|dog)$`. The two branches are complete, independent alternatives; each is tried in order at each starting position, and the first that succeeds wins. ```js console.log(/^cat|dog$/.test('hotdog')); // true — branch 2: dog$ console.log(/^cat|dog$/.test('catalog')); // true — branch 1: ^cat console.log(/^(?:cat|dog)$/.test('hotdog'));// false console.log(/^(?:cat|dog)$/.test('dog')); // true ``` The same mistake with plain text instead of anchors is just as common: `/error: timeout|refused/` means "the literal `error: timeout`" or "the bare word `refused`", and will happily match a line that says `connection refused` with no `error:` prefix at all. ## Fixing it Wrap the alternatives in a group so the alternation cannot reach past it: `/^(?:cat|dog)$/`, `/error: (?:timeout|refused)/`. Use a **non-capturing** group unless you want to know which branch matched; if you do want that, a capturing or named group is the natural place to record it. Grouping is the fix in every case — there is no flag or setting that changes `|` precedence. A related trap is quantifier scope, which is the same class of error one level up: `/ab+/` repeats only the `b`, and `/(?:ab)+/` repeats the pair. Quantifiers bind to one atom; parentheses are how you make several tokens into one atom. ## Anchors and boundaries are assertions, not characters Because this question is usually really about anchors, know what they assert. `^` asserts the start of input, `$` the end of input — or, with the `m` flag, the start and end of each line. Neither consumes a character; both are zero-width, which is why `/^$/` matches the empty string. `\b` is the word-boundary assertion: it succeeds at a position where exactly one side is a "word character", where word character means `[A-Za-z0-9_]` — ASCII only. That last detail bites: ```js console.log(/\bcat\b/.test('concatenate')); // false — no boundary either side console.log(/\bcat\b/.test('the cat sat')); // true console.log(/\bcafé\b/.test('café')); // false ``` The third line surprises people. `é` is not in `\w`, so between `é` and the end of the string there is no word/non-word transition and therefore no boundary. For non-ASCII text, `\b` is simply the wrong tool; you need explicit lookarounds over the character classes you actually mean. `\B` is the negation — it asserts a position that is *not* a word boundary. ## Branch order matters Alternation is ordered and non-greedy across branches: the engine tries the leftmost branch first and, if the rest of the pattern can complete, keeps it. It does not prefer the longest alternative. ```js console.log('football'.match(/foot|football/)[0]); // 'foot' console.log('football'.match(/football|foot/)[0]); // 'football' ``` So when one alternative is a prefix of another, put the longer one first — otherwise the shorter always wins. This is a routine bug in keyword and unit patterns (`/m|min|month/` will never reach `month`). ## Reading patterns defensively The habit worth building: whenever you see a `|`, mentally draw brackets around the whole enclosing expression and ask whether that is really the split you want. If the answer is no — and it usually is when anchors, prefixes, or suffixes are present — add a group. Being able to state "alternation has the lowest precedence, so it splits the entire enclosing expression" and then correct a broken pattern on the spot is exactly what the interviewer is checking.