javascript - prototype.js 突出显示单词。 DOM 正确高效遍历

Question

我想在页面加载后突出显示我的 HTML 页面中的特定单词。我不想使用哑巴:

document.innerHTML = document.innerHTML.replace(.....);

我想遍历每个 DOM 节点，找出包含文本的节点并仅修改那些单个节点的 innerHTML。这是我想出的:

function highlightSearchTerms(sword) {
$$('body').map(Element.extend).first().descendants().each(function (el) {
    if (el.nodeType == Node.ELEMENT_NODE && el.tagName != 'TD') {
        //$A(el.childNodes).each(function (onlyChild) {
            //if (onlyChild.nodeType == Node.TEXT_NODE) {
                //console.log(onlyChild);
                el.innerHTML = el.innerHTML.replace(new RegExp('('+sword+')', 'gi'), '<span class="highlight">$1</span>');
            //}
        //});
    }
});
//document.body.innerHTML.replace(new RegExp('('+sword+')', 'gi'), '<span class="highlight">$1</span>');
}

它现在可以正常工作，但效率非常低，并且几乎不比上面的单行好，因为它可能会在同一文本上进行多次替换。 (嗯...，还是不是？)

如果您取消注释注释的内容并将 el.innerHTML.replace 更改为 onlyChild.textContent.replace 它几乎可以正常工作，但修改 textContent 不会不要创建一个新的跨度作为元素，而是将 HTML 内容添加为文本。

我的问题/要求是找到一种方法，它可以逐个遍历元素来突出显示文档中的单词。

Answer 1

这工作起来又快又干净:

function highlightSearchTerms(sword) {
$$('body').map(Element.extend).first().descendants().each(function (el) {
    if (el.nodeType == Node.ELEMENT_NODE && el.tagName != 'TEXTAREA' && el.tagName != 'INPUT' && el.tagName != 'SCRIPT') {
        $A(el.childNodes).each(function (onlyChild) {
            var pos = onlyChild.textContent.indexOf(sword);
            if (onlyChild.nodeType == Node.TEXT_NODE && pos >= 0) {
                //console.log(onlyChild);
                var spannode = document.createElement('span');
                spannode.className = 'highlight';
                var middlebit = onlyChild.splitText(pos);
                var endbit = middlebit.splitText(sword.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);

                //onlyChild. = el.innerHTML.replace(new RegExp('('+sword+')', 'gi'), '<span class="highlight">$1</span>');
            }
        });
    }
});
}

但我很难理解它究竟是如何工作的。这似乎是魔法线:

middlebit.parentNode.replaceChild(spannode, middlebit);