0

Я делаю скрипт который выполняет функциональность вроде переводчика, т.е. он должен весть текст заменить своим, но сохранить форматирование. Есть поле у узлов innerText, но он получает и текст потомков что не нужно, и уничтожает потомков при замене если в них не было текста. Можно ли как то получить доступ только к ноде текста некой ноды документа html?

4
  • обарачивайте текст в span, например. И заменяйте его значение. Или может у вас он уже в каком-то textarea.
    – Gelloiss
    6 сен 2020 в 9:02
  • Я работаю уже с готовым html, я пишу пользовательский скрипт который должен работать на любой странице.
    – Gleb
    6 сен 2020 в 9:07
  • ну он же как-то определяет в каких вообще элементах нужно заменять текст?
    – Gelloiss
    6 сен 2020 в 9:08
  • 1
    А вы точно про узлы говорите? У узлов есть текстовый тип узла, в котором не может быть никаких дочерних узлов. Например напишите в консоль document.body.childNodes , или ещё нагляднее document.body.childNodes[0].nodeValue = 3333333333333
    – user347472
    6 сен 2020 в 9:09

1 ответ 1

1

У любого узла есть свойство nodeType, указывающее его тип. В частности, у текстовых узлов оно равно 3, можно взять childNodes и фильтровать их по nodeType == 3. А чтобы в коде не было магического числа 3, можно использовать встроенную константу Node.TEXT_NODE

let textNodes = findTextNodes( document.querySelector("div") );

console.log( textNodes.map(node => node.textContent) );

textNodes.forEach(node => node.textContent = "moo");

/***/
function findTextNodes(elem) {
  return [...elem.childNodes].filter(node => node.nodeType == Node.TEXT_NODE);
  // childNodes - не массив, у него нет метда filter.
  // Можно любым способом превратить его в обычный массив и потом вызвать filter.
  // [...elems] → "spread operator"
}

/***/
function findTextNodes_old(elem) {
  // filter берется из обычного [] массива и вызывается в контексте elem.childNodes
  return [].filter.call(elem.childNodes, function(node) {
    return node.nodeType == Node.TEXT_NODE;
  });
}
span { color: red; }
<div>
  1111
  <span>2222</span>
  3333
  <span>4444</span>
  5555
</div>

3
  • Почему решили использовать == 3 а не === 3?
    – Vasily
    6 сен 2020 в 11:53
  • 1
    Node.TEXT_NODE
    – Grundy
    6 сен 2020 в 12:01
  • @Vasily Потому что оба всегда будут числами... или где-то есть подвох? о_О 6 сен 2020 в 12:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.