Как получить текст у тега?

Question

У меня есть данный код.

const el = document.getElementById("wrap-text");

console.log(el.textContent)

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div id="wrap-text">
      Some text
      <span>Some text 2</span>
    </div>
  </body>
</html>

И в консоли выводиться данное сообщение:

Some text Some text 2

Но "Some text 2" не является текстом div элемента.

Также происходит и с innerText.

Как тогда получить текст внутри элементов без текстов других тегов?

Заранее спасибо за ответ.

Answer 1

Отдельной функции нет. Можно только пройтись по дочерним узлам и получить текст только текстовых узлов.

Для проверки, что узел текстовый можно проверить nodeType на значение Node.TEXT_NODE

const el = document.getElementById("wrap-text");

function onlyText(el) {
  var res = '';
  for (var i = 0; i < el.childNodes.length; i++) {
    var childNode = el.childNodes[i];
    if (childNode.nodeType == Node.TEXT_NODE) {
      res += childNode.textContent;
    }
  }
  return res;
}
console.log(onlyText(el))

<div id="wrap-text">
  Some text
  <span>Some text 2</span>
</div>

Пример с итераторами:

var onlyText = document.getElementById("wrap-text")
  .childNodes
  .values()
  .filter(n => n.nodeType == Node.TEXT_NODE)
  .map(n => n.textContent)
  .toArray()
  .join('');

console.log(onlyText)

<div id="wrap-text">
  Some text
  <span>Some text 2</span>
</div>

БЛОГ НА HUSL

Как получить текст у тега?

Ответы (1 шт):