classList содержит DOMTokenList у которого не так много методов. ... spread operator. (подробнее на русском).some().
<span class="mark">is</span> и получится колбаса, где чередуются просто-текстовые узлы с не-искомым текстом и узлы элементов, заменившие собой подстроку:this is a test
--^^-^^-------
[text("th"), el("is"), text(" "), el("is"), text(" a test")]reduce() – «уменьшитель» – метод, который из массива делает на выходе какой-то единственное значение. В данном случае я собираю на выход другой массив. Вставляю каждый встреченный текст - как текстовый узел. И если это ещё не последний элемент, то добавляю доп. элемент – обёртку вокруг поисковой строки:// вход:
[t, t, t]
// выход:
[T, E, T, E, T]This <b>is</b> textэто три узла: текстовый "This ", элемент, и снова текстовый " text".const parseNode = (node, search, replace) => {
node.childNodes.forEach((subnode) => {
if (subnode.nodeType === Node.ELEMENT_NODE) {
parseNode(subnode, search, replace); // рекурсия!
} else if (subnode.nodeType === Node.TEXT_NODE) {
// работаем с только-текстом
const parts = subnode.textContent.split(search);
if (0 === parts.length) return;
const content = parts.reduce((acc, c, i, arr) => {
acc.push(document.createTextNode(c));
if (i < arr.length - 1) acc.push(replace.cloneNode(true));
return acc;
}, []);
subnode.replaceWith(...content);
}
})
}
// использовать:
const findText = "will"; // для примера
// создать образец обёрнутого в тег поискового текста
const replace = document.createElement('span');
replace.className = 'mark';
replace.textContent = findText;
parseNode(document.querySelector('.text7'), findText, replace);Node.ELEMENT_NODE – надо внутрь него рекурсивно заглядывать той же функцией и перебирать его childNodes. А если тип 3 Node.TEXT_NODE – искать - оборачивать в тег.
ul
Динамически отрисовывать это в вебе, с сохранением вида «нарисовано мелом»?
Отдать на печать? (качество от векторизации лучше не станет)