Попробовал сделать через
DocumentFragment, рекурсивный обход текстовых
Node
и обёртку найденных слов с помощью
Range.surroundContents()
Получилось как-то переусложнённо. Но наверное лучше, чем регуляркой HTML разбирать: не станет менять слова в атрибутах тегов. Раз уж это разметка, можно работать с DOM.
Слабое место – не обошлось без регулярного выражения для поиска слов. Т.к. там кириллица, привычные
\b для границы слова не работают, пришлось заглядывать впрёд-назад, и регулярка вышла некороткая.
Криво-длинно, но работает:
Из исходного HTML делается DocumentFragment — как DOM полноценного документа. Перебираются его узлы. Если узел не-текстовый, рекурсивно перебираем его дочерние узлы.
В текстовых узлах ищем искомые слова.
Найденное слово (по одному за раз) заменяется на обёртку с этим словом.
Вместо 1 исходного текстового узла, у нас становится уже 3: текст-элемент-текст.
Далее поиск повторяется с хвостовым остатком текста – третьим (текстовым) узлом, пока в тексте не останется искомых слов для замены.
Решение не лаконичное и не простое. Если возникнут вопросы, пишите, постараюсь объяснить.
