Семантика и стили
<mark> — семантическая подсветка найденного/важного фрагмента.<span class="highlight"> + CSS.- Selection API /
::selection для пользовательского выделения.
<p>Найдено: <mark>подстрока</mark> в тексте.</p>
mark, .highlight {
background: #ffe58a;
color: inherit;
}
::selection {
background: #91caff;
}
Программный wrap совпадений поиска — через DOM Range или библиотеки, осторожно с XSS при innerHTML.
Итог
Для смысла — <mark>; для оформления — класс; для UI поиска — безопасная обёртка узлов.
