Text Search — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/Text Searchmedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

JavaScript interview question

Text Search

medium20 min

Return escaped HTML with literal, case-insensitive matches wrapped in mark tags while preserving the original text.

Requirements

Export highlightText(text, query) as named and default. Match query as a literal substring, case-insensitively for ASCII letters. Preserve the original text’s casing.
Wrap every left-to-right, non-overlapping match in <mark>...</mark>. A match can start anywhere inside a word. Empty query produces escaped text without highlights.
Escape &, <, >, double quotes, and single quotes in all input text, including inside highlighted matches. Only the mark wrappers are generated markup. Do not interpret input as existing HTML.
Treat regular-expression characters in query literally. Query matching happens on raw text before escaping. Do not mutate inputs or require DOM APIs.
Non-ASCII characters can match literally, but Unicode case folding that changes string length, overlapping matches, fuzzy matching, and multiple search terms are outside scope.

Example 1

Input: highlightText("React and react", "react")
Output: "<mark>React</mark> and <mark>react</mark>"

Example 2

Input: highlightText("a+b <script>", "a+b")
Output: "<mark>a+b</mark> &lt;script&gt;"

Implement the exported function in index.js or index.ts. Tests provide fixtures for the required behavior.

What the tests check

References

StringsSearchEscaping

Preparing your workspace…