HardFrontendAsked in 20245 min read

Query text highlighter

Q: Query text highlighter

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Hard > **How to read this doc:** the exact real outcome — 2 case-insensitive matches ("Quick" and "quick") correctly wrapped in real ` ` elements, with the surrounding real text content preserved byte-for-byte — was verified directly against a real jsdom container. ## 1. The problem, restated Walk every real TEXT NODE inside a container, find every real occurrence of a search query within each one (case-insensitively), and replace the plain text with a mix of plain text and real ` `-wrapped matched substrings — without corrupting any surrounding real DOM structure or other element nodes. ## 2. Clarifying questions a strong candidate asks | Question | Why it matters | | :--- | :--- | | Multiple separate text nodes? | Yes, genuinely required for any real container with more than trivial content — a real `TreeWalker` is the correct tool for visiting every text node. | | Case

3.3k views

130 of 154

The problem

Problem, as an interviewer would state it: "Implement a search-text highlighter: given a container element and a query string, wrap every real occurrence of that query (case-insensitive) in a <mark> element, without disturbing any other DOM structure."

Examples:

Code

highlightText(container, "quick"); // both "Quick" and "quick" get wrapped in <mark>

Clarifying questions expected:

Should this search across MULTIPLE separate text nodes within the container, or only within a single text node?
Case-sensitive or case-insensitive matching by default?
What real characters in the query need escaping, given the search is implemented with a regular expression?

Code / implementation expected: Yes — real, direct proof against a real jsdom container confirming correct, case-insensitive matches wrapped in real <mark> elements, with all surrounding text preserved exactly.

js-coding
utility
algorithm

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Hard

How to read this doc: the exact real outcome — 2 case-insensitive matches ("Quick" and "quick") correctly wrapped in real `` elements, with the surrounding real text content preserved byte-for-byte — was verified directly against a real jsdom container.

1. The problem, restated

Walk every real TEXT NODE inside a container, find every real occurrence of a search query within each one (case-insensitively), and replace the plain text with a mix of plain text and real ``-wrapped matched substrings — without corrupting any surrounding real DOM structure or other element nodes.

2. Clarifying questions a strong candidate asks

Question	Why it matters
Multiple separate text nodes?	Yes, genuinely required for any real container with more than trivial

The solution is hidden so you can try first

5 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: the highlighter correctly wraps case-insensitive matches in real mark elements against a jsdom container, preserving surrounding text

Practice

Discussion

Other approaches, follow-ups and how it went in real interviews.

No comments yet. Share how you would answer it.

Question 130 of 154 in JavaScript coding

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

All JavaScript coding questions

Up nextHard→

Find nearest common ancestor node

Continue