JavaScript中HTML节点中的文本和子元素分隔

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数组，则可以通过切换语句运行子节点并检查节点类型。

注意：这是所有的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>