Как выделить определенные слова в тексте?
Есть массив слов. Я хочу сделать чтобы эти слова на странице оборачивались в
<div class="word">...</div>
Но не совсем понимаю как это сделать.
Буду благодарен за полезную информацию.
Ответы (1 шт):
Простое и "грязное" решение - замена разметки элемента-контейнера или body:
document.body.innerHTML = arrayOfWords.reduce(
(rslt, word) => rslt.replace(new RegExp(word, 'gi'), '<div class="word">$&</div>')
, document.body.innerHTML);
Решение грязное потому что такая замена может сломать разметку, если в arrayOfWords окажется строка совпадающая с тегами, с атрибутами (включая не только имена, но и значения), или с содержимым <style> и <script>.
То есть, если и применять такой вариант (или подобные ему), то с большой осторожностью.
Подобные задачи, строго говоря, вообще должны решаться не изменением уже существующей разметки (как предполагает вопрос), которое в любом случае окажется "грязным" так или иначе - а генерацией элементов контента из набора данных (обычно для этого применяют реактивные библиотеки работающие с Shadow DOM, такие как React и Vue).