highlightMultiple
Highlights multiple terms in a string by wrapping them with a start and end wrapper.
1/**
2 * Highlights multiple terms in a string by wrapping them with a start
3 * and end wrapper.
4 *
5 * @param text - The input text to highlight.
6 * @param terms - An array of terms to highlight (case-insensitive).
7 * @param wrapperStart - The opening wrapper (e.g., '<b>' or '**').
8 * @param wrapperEnd
9 * - The closing wrapper (optional if using a symmetric wrapper like '**').
10 * @returns A new string with highlighted terms.
11 */
12export function highlightMultiple(
13 text: string,
14 terms: string[],
15 wrapperStart: string = '**',
16 wrapperEnd?: string
17): string {
18 if (!terms.length) return text;
19 const end = wrapperEnd ?? wrapperStart;
20 const escapedTerms = terms
21 .filter(Boolean)
22 .map(term => term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
23 const regex = new RegExp(`(${escapedTerms.join('|')})`, 'gi');
24 return text.replace(regex, `${wrapperStart}$1${end}`);
25}
Multi-Term Support
Enables highlighting of multiple terms in a single pass, making it ideal for advanced search and filter interfaces.
Case-Insensitive Matching
Performs case-insensitive matching by default, improving user experience and accuracy in search-like use cases.
Customizable Wrappers
Supports both symmetric (e.g.
**term**
) and asymmetric (e.g.<b>term</b>
) wrappers, making it versatile for markdown, HTML, or other contexts.Safe Regex Handling
Escapes special regex characters in terms to avoid unintended behavior or injection issues.
Fails Gracefully
If no terms are provided, returns the original text unchanged, avoiding unnecessary computation or errors.
Tests | Examples
1import { highlightMultiple } from './highlightMultiple';
2
3test('highlightMultiple - highlights multiple terms', () => {
4 expect(highlightMultiple('foo bar baz', ['foo', 'baz'], '<b>', '</b>'))
5 .toBe('<b>foo</b> bar <b>baz</b>');
6});
7
8test('highlightMultiple - works with markdown wrapper', () => {
9 expect(highlightMultiple('alpha beta gamma', ['beta'], '__'))
10 .toBe('alpha __beta__ gamma');
11});
12
13test('highlightMultiple - case-insensitive', () => {
14 expect(highlightMultiple('One two THREE', ['one', 'three'], '[', ']'))
15 .toBe('[One] two [THREE]');
16});
17
18test('highlightMultiple - special characters', () => {
19 expect(highlightMultiple('match .+*? symbols', ['.+*?'], '**'))
20 .toBe('match **.+*?** symbols');
21});
22
23test('highlightMultiple - empty terms list', () => {
24 expect(highlightMultiple('nothing to highlight', []))
25 .toBe('nothing to highlight');
26});
27
28test('highlightMultiple - undefined end wrapper uses start', () => {
29 expect(highlightMultiple('test both ends', ['both'], '__'))
30 .toBe('test __both__ ends');
31});
Common Use Cases
Search Result Highlighting
Emphasize matched keywords in search results, product listings, or document previews.
Live Filtering UI
Visually enhance filtered content in real-time as the user types search terms.
Markdown/HTML Rendering
Wrap keywords with
**
,<b>
,<mark>
, or other tags for styled output.Educational Tools
Highlight vocabulary words, syntax examples, or specific patterns in code/tutorial content.
Accessibility & UX
Improve readability by drawing attention to key terms users are likely to focus on.