Yevhen Klymentiev
dark
light
console
darkness
y.klymentiev@gmail.com
Reusable Snippets|Practical utility code for everyday use — custom-built and ready to share

highlightMultiple

Highlights multiple terms in a string by wrapping them with a start and end wrapper.

TypeScript
Copied!
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

TypeScript
Copied!
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.

Codebase: Utilities -> Strings -> highlightMultiple | Yevhen Klymentiev