Разделите текст и дочерние элементы в узле HTML в JavaScript

Question

В JavaScript я хотел бы разделить узел на отдельные текстовые и дочерние элементы. Рассмотрим следующий узел:

<p>text <b>bold</b> and <i>italic</i></p>

Я хотел бы получить массив (или что-то итеративное), который выглядит следующим образом:

1. "text" => text
2. <b>bold</b> => child
3. "and" => text
4. <i>italic</i> => child

Как это сделать эффективно и элегантно?

Answer 1

Если вы хотите получить массив текста / HTML для каждого дочернего узла, вы можете запустить дочерние элементы с помощью оператора switch и проверить тип узла.

Примечание : Вот все nodeTypes .

const nodeText = (nodes) => {
  return Array.from(nodes).map(node => {
    switch (node.nodeType) {
      case Node.TEXT_NODE:
        return node.textContent.trim();
      case Node.ELEMENT_NODE:
        return node.outerHTML;
      default:
        return null;
    }
  }).filter(text => text != null);
}

console.log(nodeText(document.querySelector('p').childNodes));

.as-console-wrapper { top: 0; max-height: 100% !important; }

<p>text <b>bold</b> and <i>italic</i></p>