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

<Meta title='@dxtmisha/ru/functional-basic/Functions/addTagHighlightMatch - Подсветка совпадений в строке'/>

# `addTagHighlightMatch`

Утилита для выделения совпадений в строке путём оборачивания их в HTML-тег `<span>` с заданным классом. Использует `getSeparatingSearchExp` для поддержки поиска по нескольким словам (через пробел).

**Параметры:**
- `value: string` — Исходная строка для обработки.
- `search?: string | RegExp` — Строка поиска (одно или несколько слов через пробел) или регулярное выражение.
- `className: string = 'sys-highlight-match'` — CSS-класс, который будет добавлен к тегу `<span>`.
- `shouldEscape: boolean = false` — Нужно ли экранировать строку перед добавлением подсветки.

**Возвращает:**
`string` — Строка с добавленными HTML-тегами для подсветки.

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

// Подсветка одного слова
addTagHighlightMatch('Hello world', 'hello')
// '<span class="sys-highlight-match">Hello</span> world'

// Подсветка нескольких слов (OR-логика)
addTagHighlightMatch('Apple and Banana', 'apple banana')
// '<span class="sys-highlight-match">Apple</span> and <span class="sys-highlight-match">Banana</span>'

// Кастомный класс
addTagHighlightMatch('Test', 'test', 'text-red')
// '<span class="text-red">Test</span>'

// С экранированием
addTagHighlightMatch('<b>bold</b>', 'bold', 'sys-highlight-match', true)
// '&lt;b&gt;<span class="sys-highlight-match">bold</span>&lt;/b&gt;'
  `}
/>
