Try it
Type a term like the, garden, or weaver. Then use Next/Prev to move the “current match” marker in the AFTER panel.
Shortcuts: Enter = Next, Shift+Enter = Prev, Esc = Clear (when not typing in the input).
BEFOREHighlight is color-only + no count + no navigation
Problems: relies on link-blue text, doesn’t tell you how many matches exist, and resets the entire document with innerHTML on every keystroke.
(No status.)
AFTERSemantic <mark> + visible shape + calm status + next/prev
Pattern: rebuild from textContent, wrap matches in <mark>, add a distinct “current match” outline, and announce counts via role="status".
Quick checklist
- Don’t rely on color alone; use a shape (background, underline, outline).
- Use semantic
<mark>for highlighted matches where possible. - Show a calm count: “7 matches” (polite live region).
- Support next/prev without stealing focus from the user’s current control.
- Rebuild highlights safely (avoid injecting raw user input into
innerHTML).