Как можно менять контент сайта?

Question

[Soft_touch_plastic]

Здравствуйте, есть такая задача менять текстовый контент сайта, например все слова автомобиль заменить на слово самокат. Сейчас написал рекурсивное решение, примерно так:

function recursiveReplace(node, original, replace) {
    const regex = new RegExp(`${original}`, 'i') //регулярное выражение с флагом i для игнорирования регистра
    if(node.innerText.search(regex) > -1) { //если в текстовом контенте блока найдено такое слово
        const childs = node.childs() //хоткей для получения потомков, аналог node.children, уже обернутый в Array.from()
        if(childs.length == 0) { //если детей у блока нет, значит слово находится внутри него, просто меняем на замену
            node.innerText = node.innerText.replace(regex, replace)
        } else { //если у блока есть дети, то слово может быть как в одном из них, так и в текстовой ноде блока
            const completed = childs.map(c => recursiveReplace(c, original, replace)) //к каждому ребенку применяем рекурсивную замену
            if( completed.every(i => !i) ) { //если в каждом ребенке такого слова не нашлось, значит слово в текстовой ноде самого блока
                node.innerHTML = node.innerHTML.replace(regex, replace)
            }
        }
        return true
    } else {
        return false
    }
}

Работает решение так себе, иногда проскакивают не заменённые слова, скорее всего я что-то не учел. Поэтому, возможно кто-нибудь знает решения лучше моего? Реквестую любые способы улучшения текущего алго, заранее спасибо!

Comments

[Dmitry Bay]

А смысл на фронте менять? Для поисковых движков там все равно будет автомобиль.

И зачем разделять на ноды? Не проще сразу html на странице обработать через replace?

[Soft_touch_plastic]

Dmitry Bay, насчет смены на фронте - разрабатываю расширение с таким функционалом. Насчет разбивки по нодам - верстка поломается если просто заменить innerHTML во всем html, приходится менять "понодно"

[SagePtr]

Энциклонгов хотите переизобрести?)

Answer 1

[Надим]

Используй TreeWalker, чтобы получить все нужные тебе узлы с документа.

Например, вот так можно выцепить все текстовые ноды:

function getTextNodes() {
  var n, a=[], walk=document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
  while (n=walk.nextNode()) a.push(n);
  return a;
}

Дальше просто обходи результат в цикле и делай автозамену слов в текстовых нодах.

Comments

[Soft_touch_plastic]

Спасибо! Чего-то такого нативного и ждал

[Надим]

Soft_touch_plastic, если у тебя только одна замена, тебе наверное проще будет сразу в итераторе это делать:

var n;
var walk = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

while (n = walk.nextNode()) {
    n.textContent = n.textContent.replace(/автомобиль/ig, 'самокат');
}

[Soft_touch_plastic]

Надим Закиров, а если у нас есть фраза, которая находится сразу внутри нескольких элементов? Например,
<span>ООО <b>"большое ведро"</b></span>
В таком случае nodeWalker не сможет заменить фразу?

[Надим]

Soft_touch_plastic, а это не проблема TreeWalker. Это проблема обработки массива текстовых нод. Значит вам просто надо предусмотреть правило для замены определенных сочетаний текстовых нод.