如何使用javascript修改文本节点的内容？

Question

我正在使用javascript编写浏览器扩展程序以突出显示关键字。到目前为止，我已经过滤了DOM树以获取所有叶节点。但我修改这些节点时遇到问题，因为它们是叶节点（nodeType == 3）。 node.nodeValue = '<em>keyword</em> is highlighted'不起作用，因为转义了尖括号。 replaceChild无法工作，因为'<em>keyword</em> is highlighted'之类的东西不是单个节点，而是实际上是节点的集合，我不想将它们包装到一个节点中。

Answer 1

一些基本的DOM操作会做到这一点。使用文本节点splitText()方法两次创建三个文本节点，将包含关键字的中间文本节点移动到突出显示元素中，并在剩余的两个文本节点之间插入<em>元素。

示例

现场演示：http://jsfiddle.net/6228e/

HTML：

<div id="example">This text contains a keyword to highlight</div>

JavaScript以突出显示关键字：

var div = document.getElementById("example");
var textNode = div.firstChild;
var keyword = "keyword";
var keywordIndex = textNode.data.indexOf(keyword);
if (keywordIndex > -1) {
    // First, split at the start of the keyword
    var keywordTextNode = textNode.splitText(keywordIndex);

    // Now split off the section after the keyword
    var textNodeAfterKeyword = keywordTextNode.splitText(keyword.length);

    // We now have three text nodes containing the text before the keyword,
    // the keyword itself and the text after the keyword.

    // Create the highlight element and put the keyword text node inside it
    var highlightEl = document.createElement("em");
    highlightEl.appendChild(keywordTextNode);

    // Insert the highlight element and we're done
    div.insertBefore(highlightEl, textNodeAfterKeyword);
}

这仅适用于包含包含单个关键字的单个文本节点的元素的特定情况。有关更一般的解决方案，请参阅

https://stackoverflow.com/a/10618517/96100