Как достать текстовые узлы и заменить их?

Question

[Astral100498]

Добрый день.Реализую функционал замены текстовых узлов страницы на свои. С помощью данной функции document.querySelector('body'). Я достаю код html страницы.

Я хочу реализовать замену текстовых узлов. Так что бы структура страницы не сломалась.(Например перевод страницы). Как мне подставить новые текстовые узлы в родные места? Может это как то реализуется через JSON?
Главное чтобы это было заточено не только под одну страницу. А чтобы замена работала на любом сайте

Пример получаемого кода document.querySelector('body') это кусочек .

<div id="TMpanel" role="TMpanel">
  <div class="container">
    <div class="logo-wrapper">
      <a class="logo" href="/" title="">
        <svg fill="none" height="24" viewBox="0 0 121 24" width="121" xmlns="http://www.w3.org/2000/svg">
         .......
      <div id="dropdown" class="dropdown hidden">
        <div class="dropdown-heading">
          Все сервисы Хабра
        </div>
        <a class="service" href="https://habr.com/?utm_source=habr_qna&amp;utm_medium=habr_top_panel">
          <div class="service-title">
            .....
          <p class="service-description">
            Сообщество IT-специалистов
          </p>
        </a>
        <a class="service" href="/">
         .......
          <p class="service-description">
            Профессиональное развитие в IT
          </p>
        </a>
        <a class="service" href="https://freelance.habr.com?utm_source=habr_qna&amp;utm_medium=habr_top_panel">
          <p class="service-description">
            Удаленная работа для IT-специалистов
          </p>
        </a>
      </div>
    </div>
              <div class="bmenu_inner" role="bmenu_inner" style="display:flex!important;visibility:visible!important;">
          <span class="bmenu slink">
    <a href="https://u.tmtm.ru/kultura_header" style="color: #E37979" onclick="ga('send', 'event', 'habr_top_panel', 'megapost', 'https://u.tmtm.ru/kultura_header');">
      Как умные технологии управляют дорогой недвижимостью    </a>
  </span>
      </div>
          </div>
</div>

С помощью функции document.body.textContent. Получаю текстовые узлы сайта.
Для примера

3
ответа
JAVASCRIPT
 Простой
За что отвечает параметр bubbles в конструкторах событий?
1 подписчик  3 часа назад  44 просмотра
 2
ответа
JAVASCRIPT
+1 ЕЩЁ
 Простой
Как встроить усы в src изображения?
1 подписчик  3 часа назад  52 просмотра
 1
ответ
JAVASCRIPT
+1 ЕЩЁ
 Простой
Как стилизовать input?
1 подписчик  4 часа назад  64 просмотра
1
ответ
Показать ещё
ВАКАНСИИ С ХАБР КАРЬЕРЫ
JavaScript разработчик/Frontend (Middle / Senior)
Maximal • Челябинск
от 60 000 до 120 000 ₽
JavaScript/Node.js
Sipuni
от 80 000 до 100 000 ₽
Frontend разработчик в Юздеск
Юздеск • Москва
от 90 000 до 130 000 ₽
Ещё вакансии
ЗАКАЗЫ С ХАБР ФРИЛАНСА
MVP мобильного приложения на unreal engine
15 сент. 2020, в 13:37
50000 руб./за проект
Одежда в marvelousdesigner
15 сент. 2020, в 13:33
4000 руб./за проект
Оптимизировать скрипт на Pine Script (Tradingview)
15 сент. 2020, в 13:32
5000 руб./за проект
Ещё заказы
МИНУТОЧКУ ВНИМАНИЯ
Эволюция доменных имён: от простого ASCII к Unicode
Мегапост 
Стажировка в "Лаборатории Касперского": отзывы и условия
Мегапост 
Осень уже накрыла? Взбодрись с промокодом
Промо 
© Habr
О сервисе
Обратная связь
Блог"

Answer 1

[hzzzzl]

известно, какие именно элементы надо менять?
попробуй тут в консоли на тостере, .question__title-link это ссылки на вопросы в правом сайдбаре

document.querySelectorAll('.question__title-link')
  .forEach(a => {
    a.textContent = `HELLOO __ ${a.textContent} __ OLLEH`
  })

Comments

[Astral100498]

Я пытаюсь реализовать механизм перевода страницы как у гугл. То есть я должен взять текстовые узлы сайта перевести их и вставить взамен старых. Переведенные узлы лежат в json. Вот я не могу реализовать механизм замены. Чтобы это работало на всех сайта и не затачивалось под одну страницу

[hzzzzl]

Astral100498, ага, а если так?

// stack overflow 
function textNodesUnder(el){
  var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode()) a.push(n);
  return a;
}

// можно подставить и document.body
all = textNodesUnder( document.querySelector('div.question__body') )

all.forEach(txt => {
  // сюда условный "перевод"
  txt.textContent = `_ ${txt.textContent} _`
})

взять текстовые узлы сайта перевести их и вставить взамен старых. Переведенные узлы лежат в json

имеется же в виду переводить отдельно каждый узел? или перевод уже готовый лежит в json, где последовательно всё переведено

[Astral100498]

hzzzzl, Спасибо, буду ковырять этот кусок кода

По отдельности переводить узлы я не знаю как. Я реализовал перевод сразу всех. И в jsone они лежат по порядке от самого первого до последнего. Надо взять из него и подставить на старое место.