javascript - 将文本节点类型转换为 Javascript 中的元素

Question

这有点像 a continuation of an earlier question .

我有一些html。

<h3>things that are red:</h3>
<ul>
   <li><a href="html://www.redapples.com">Red Apples</a></li>
   <li><a href="html://www.redmeat.com">Red Meat</a></li>
   <li><a href="html://www.redcar.com">All Red Cars</a></li>
</ul>

我想使用 javascript 将所有文本元素用一个元素包裹起来

我正在寻找的结果。

<h3>things that are <span class="red">red</span>:</h3>
<ul>
   <li><a href="html://www.redapples.com"><span class="red">Red</span> Apples</a></li>
   <li><a href="html://www.redmeat.com"><span class="red">Red</span> Meat</a></li>
   <li><a href="html://www.redcar.com">All <span class="red">Red</span> Cars</a></li>
</ul>

经过深思熟虑，我意识到在浏览 DOM 时必须区分文本节点类型和元素节点类型。我使用了我之前问题的一些反馈，并编写了这个小脚本。

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}

walkTheDOM(document.body, function (node) {
// Is it a Text node?       
if (node.nodeType === 3) { 
    var text = node.data.trim();
    // Does it have non white-space text content?       
    if (text.length > 0) {              
        node.data = text.replace(/(RED)/gi, '<span class="red">$1</span>'); 
    }
}
});

除了输出是文本而不是 html 之外，这几乎完成了我想要它完成的工作。所以我的问题是，是否有一种简单的方法来修复这条线

node.data = text.replace(/(RED)/gi, '<span class="red">$1</span>'); 

所以输出是html？

Answer 1

正如我在评论中暗示的那样，要使这个通用化，您需要做的是创建一个新元素，将文本节点放入其中，然后用新元素替换文本节点。

function wrapTextNode(textNode) {
    var spanNode = document.createElement('span');
    spanNode.setAttribute('class', 'red');
    var newTextNode = document.createTextNode(textNode.textContent);
    spanNode.appendChild(newTextNode);
    textNode.parentNode.replaceChild(spanNode, textNode);
}

[].forEach.call(document.querySelectorAll('a'), function(el) {
    var textNode = el.childNodes[0];
    wrapTextNode(textNode);
});

编辑: fiddle