javascript - 如何封装文本 "nodes"但没有节点本身？

Question

我想使用 JavaScript 从 HTML 代码中获取所有文本字符串，并将它们封装在独立的标签中作为其父级的子级。

示例

这是我的 HTML:

<div>
    Text Text Text
    <p>
        Text Text
    </p>
    <b>
        Text Text
        <i>
            Text.
        </i>
    </b>
    Text Text Text.
</div>

(代码没有选项卡，它是由页面本身在一行中编写的。)

这就是我想要得到的:

<div>
    <span>Text Text Text</span>
    <p>
        <span>Text Text</span>
    </p>
    <b>
        <span>Text Text</span>
        <i>
            <span>Text.</span>
        </i>
    </b>
    <span>Text Text Text.</span>
</div>

我一直在寻找如何使用 innerHTML、textContent、insertAdjacentHTML()... 但我不知道如何以可靠的方式进行。

你有什么办法可以做到吗？ (如果可能的话，请提供一种在普通 JavaScript 中执行此操作的方法。)提前致谢。

Answer 1

您可以使用 TreeWalker 获取页面的所有文本节点(通过document.createTreeWalker方法构建)，然后使用Node#replaceChild来完成剩下的事情:

function getTextNodes(root) {

  var tw = document.createTreeWalker(root || document.body, NodeFilter.SHOW_TEXT, {
    acceptNode: function(node) {
      return /^(STYLE|SCRIPT)$/.test(node.parentElement.tagName) ||
        /^\s*$/.test(node.data) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
    }
  })

  var result = []
  while (tw.nextNode()) result.push(tw.currentNode)
  return result
}

getTextNodes().forEach(function(n) {
  var span = document.createElement('span')
  n.parentNode.replaceChild(span, n)
  span.appendChild(n)
})

console.log(document.body.firstElementChild.innerHTML)

span {
  border: 1px solid #f00;
}

<main>

  <div>
    Text Text Text
    <p>
      Text Text
    </p>
    <b>
        Text Text
        <i>
            Text.
        </i>
    </b> Text Text Text.
  </div>

</main>