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时我必须区分文本nodeTypes和Element NodeTypes。我使用了之前问题的一些反馈，并编写了这个小脚本。

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

Answer 2

DEMO

$(function() {
    $('li a').html(function(i,html) {
        return html.replace(/(RED)/gi, '<span class="red">$1</span>');
    });
});

在Javascript中将文本NodeType转换为元素

2 个答案: