search-text-highlight
Find and highlight substrings in text with an HTML wrapper — full unicode support.
search-text-highlight is a small TypeScript utility that solves one problem well: given a haystack string and a needle query, return the same haystack with matching substrings wrapped in a configurable HTML tag. Custom tag name, custom class, case sensitivity toggle, match-all or match-first behaviour, and full unicode awareness. It's the same library Dailybot's own search UIs use to highlight results — small, dependency-light, production-tested.
1
focused utility, does one thing well
0
runtime dependencies
Full
unicode and emoji safety
MIT
licensed, end to end
Why it exists
The bits that make it worth adopting.
Configurable wrapper tag
Wrap matches in `<mark>`, `<span>`, `<b>`, or any HTML tag you like. Add a custom class for styling. The library gives you the primitive, your CSS does the rest.
Case-sensitive or case-insensitive
Toggle with a boolean. Case-insensitive matching still preserves the original casing of the highlighted text — you don't lose the reader's context.
Match all or match first
Sometimes you want to highlight every occurrence of a term; sometimes just the first. One flag, either behavior.
Unicode + emoji safe
Multi-byte characters, combining marks, and emoji sequences are all handled correctly. You won't get half-highlighted `👨👩👧` families.
Zero runtime dependencies
Pure TypeScript with no runtime deps. Bundle size is tiny; works in Node, the browser, and edge runtimes.
MIT + fully forkable
The whole utility is MIT-licensed. Fork it, adapt the wrapper syntax, extend the match strategy — the code and licence say yes.
Install
Get started in seconds.
Pick the channel that matches your stack. Every path lands you in the same working state.
npm i search-text-highlightIn practice
What teams actually do with it.
01
Search-results UI with highlighted terms
The user types a query in your search box. Results render with the query terms wrapped in `<mark>`. Users see immediately why a result matched — no need to hunt for the term in a wall of prose.
02
Command palette / autocomplete matching
As the user types, matching characters in the suggestion list get bolded. Same one function call, same predictable output.
03
Chat history search
Your app's chat history search returns messages with the query terms highlighted inline. Users can scan for the relevant part of a long message without re-reading it.
04
Doc site full-text search
Static site search results with highlighted terms. The user sees the query in context, not just a title and a snippet.
At a glance
The short list.
Highlight all matches or just the first
Custom HTML tag and class name
Case-sensitive or case-insensitive
Unicode / emoji safe
FAQ
The questions we hear the most.
How does it differ from a naive `replace()` call?
A regex `replace()` will happily corrupt multi-byte characters and produce broken HTML. search-text-highlight walks the string with unicode awareness and escapes special characters correctly.
Can I customize the wrapper HTML?
Yes. Set `tag: 'mark'`, `tag: 'span'`, or any tag name. Add a class with `className: 'match'`. The library is a primitive, not a framework.
Does it handle emoji correctly?
Yes. Combining marks, ZWJ sequences, and multi-code-point emoji are all handled. Highlighting inside emoji sequences is safe.
What it is
search-text-highlight is a small TypeScript utility that does one thing well: return a haystack string with query matches wrapped in a configurable HTML tag. Unicode-safe, case-configurable, dependency-free — the kind of primitive every search UI eventually needs.
Why open source
Because “highlight the matching substring” is a solved problem, and the solution should be a small MIT-licensed library instead of another home-grown regex in every codebase. Fork it, adapt it, contribute back.
How it fits the ecosystem
Dailybot’s search UIs use this library. Every time you search for a check-in, a report, or a form response, the matched terms come back highlighted through this exact code path. Open-sourcing it means every team building search UI can borrow the same primitive.
Ready to try it?
Open source, MIT-licensed, and shipping in production at Dailybot every day. Fork it, wire it in, contribute back.
Other Dailybot open source
Dailybot CLI
The command-line client for the whole Dailybot API.
Dailybot Agent Skill
The official adapter between your AI coding agent and Dailybot's public API.
Deep Work Plan
The gated-plan methodology any AI coding agent can execute.
Deep Work Plan website
The open-source marketing site and documentation for the Deep Work Plan methodology.