Javascript “如何封装文本”；节点“；但是没有节点本身？

我想用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（）

。。。但我不知道如何以可靠的方式做到这一点

你有没有想到什么办法？（如果可能的话，请提供一种使用vanilla JavaScript实现的方法。）

---

提前感谢。

您可以使用（由该方法构建）获取页面的所有文本节点，然后使用

节点#replaceChild

执行其余操作：

函数getTextNodes（根）{ var tw=document.createTreeWalker（根| | document.body，NodeFilter.SHOW_TEXT{ acceptNode:函数（节点）{ return/^（STYLE | SCRIPT）$/.test（node.parentElement.tagName）|| /^\s*$/.test（node.data）？NodeFilter.FILTER\u拒绝：NodeFilter.FILTER\u接受 } }) var结果=[] while（tw.nextNode（））result.push（tw.currentNode） 返回结果 } getTextNodes（）.forEach（函数（n）{ var span=document.createElement（'span'） n、 parentNode.replaceChild（span，n） span.appendChild（n） }) console.log（document.body.firstElementChild.innerHTML）

span{
边框：1px实心#f00；
}

文本文本文本

文本

文本
文本。
文本文本。

它可以工作！非常感谢你！PD：也许你可以举一个更简单的例子。