import { Meta, Source } from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/en/functional-basic/Functions/addTagHighlightMatch - Highlight matches in a string'/>

# `addTagHighlightMatch`

A utility for highlighting matches in a string by wrapping them in a `<span>` HTML tag with a specified class. It uses `getSeparatingSearchExp` to support multi-word search (space-separated).

**Parameters:**
- `value: string` — The initial string to process.
- `search?: string | RegExp` — The search string (one or more words separated by spaces) or a regular expression.
- `className: string = 'sys-highlight-match'` — The CSS class to be added to the `<span>` tag.
- `shouldEscape: boolean = false` — Whether to escape the string before adding highlighting.

**Returns:**
`string` — The string with HTML tags added for highlighting.

<Source
  language='typescript'
  code={`
import { addTagHighlightMatch } from '@dxtmisha/functional-basic'

// Highlight a single word
addTagHighlightMatch('Hello world', 'hello')
// '<span class="sys-highlight-match">Hello</span> world'

// Highlight multiple words (OR logic)
addTagHighlightMatch('Apple and Banana', 'apple banana')
// '<span class="sys-highlight-match">Apple</span> and <span class="sys-highlight-match">Banana</span>'

// Custom class
addTagHighlightMatch('Test', 'test', 'text-red')
// '<span class="text-red">Test</span>'

// With escaping
addTagHighlightMatch('<b>bold</b>', 'bold', 'sys-highlight-match', true)
// '&lt;b&gt;<span class="sys-highlight-match">bold</span>&lt;/b&gt;'
  `}
/>
