Можно ли как-то улучшить код и написать все более эффективно?
Нужно заменить все определенные слова на странице и обнрнуть тегом...
document.body.innerHTML= document.body.innerHTML.replace(new RegExp('word', 'g'), `<h1>глаголъ</h1>');
В данном коде есть сомнения, есть ли эффективным замена всего тела дока., вместо поиска по дереву и замена индивидуальной части. Если, например,
let matches = Array.prototype.slice.call(document.querySelectorAll("body *")).filter(el => el.textContent.includes('word'));
-- тогда если в тексте встречается тег, слово до тега будет заменено, после - нет. можно и с .firstChild.nodeValue
уточнать, но мало что меняет. Что странно, при поиске с el.firstChild.nodeValue.includes('word');
, если в теге есть, например, <h3>2contain word<span>на wordывоаывол</span>word certin text</h3>
span, тогда за ним результат наличия условия уже пробускается, а берется h3 до спана и сам спан, как результаты...
Имеет ли смысл использовать substring
?
обновл: значит, проблема главная в том, что бы вставить html и не обрушить события: el.innerHTML = el.innerHTML.replace(хWord,
${хWord})
можно ли взять Node и его value и вставить html в текст как-то?
(в комментах есть ссылки на алгоритмы, но ищу что-то явно проще... как-то vue.js и др. ведь это дело делают)
innerHTML
- то опять же слетят события. К тому же, возможны варианты вида<span>При<b>вет</b></span>
. Нужно ли заменить слово Привет?innerHTML
- плохая идея. Лучше всего делать замену внутри каждогоtextNode
. @Grundy выше дал ссылку на пост, там можно найти примеры решений, но у меня есть к ним замечание. Как по мне, обход текстовых нодов вручную - устаревший вариант. Сейчас есть интерфейсTreeWalker
, он проще и эффективнее ручного обхода. Тут есть сравнение различных способов полученияtextNodes
, в т.ч.TreeWalker
.