Live Search Table with Highlighted Matches — Real Substring Highlighting (JS)

A search box that filters a table is useful; one that also shows *exactly where* the match occurred inside each cell is far more useful, because the user doesn't have to re-scan the row to figure out why it matched. This snippet builds real substring-position highlighting in plain HTML, CSS, and vanilla JavaScript — it finds every occurrence of the query inside each cell's text and wraps only that slice in <mark>, rather than tinting the whole cell or row.

Finding every occurrence, not just the first

highlightAll() walks each cell's text with indexOf in a loop, advancing the search position past each match so it finds *every* non-overlapping occurrence of the query — not just the first. A naive implementation that only highlights the first hit misses repeated terms within the same cell (e.g. "Safari" appearing twice), which looks like a bug the moment a user searches for a common word.

Escape-then-wrap, never innerHTML on raw text

Because the result is injected via innerHTML, every plain-text segment is passed through esc() before being placed in the output string, and only the matched slice is wrapped in <mark>. This escape-then-wrap order means a ticket subject containing < or & renders as literal text instead of being interpreted as markup — the query itself never needs escaping since it's compared against lowercase text and only used to slice the *original* (already-safe-to-escape) string.

Filtering AND highlighting from the same query

A single input drives both behaviors: rows are kept only if *any* column contains the query (case-insensitive), and every kept row's cells run through the same highlighting function. Because filtering and highlighting share one raw/q pair, there's no risk of the visible highlight drifting from what actually caused the row to match.

Real position math, not a CSS trick

The highlighting genuinely locates character offsets with indexOf and slices the string at those offsets — it isn't a background-color applied to a whole <td> or a CSS :contains-style hack (which doesn't exist and couldn't underline a substring anyway). This is the same technique behind real search-result snippets in tools like a code search UI or a command palette.

Count, empty state, and multi-column search

A live "N of M" count and a friendly empty state (echoing back the exact query that matched nothing) round out the interaction. The search runs across every column — ticket number, subject, requester, and assignee — so one input replaces four separate filters. Pair it with a filterable-table when you need independent per-column filters instead of one combined search, or a sortable-table to let users reorder the highlighted results.