我正在使用javascript编写浏览器扩展程序以突出显示关键字。到目前为止，我已经过滤了DOM树以获取所有叶节点。但我修改这些节点时遇到问题，因为它们是叶节点（nodeType == 3）。 node.nodeValue = '<em>keyword</em> is highlighted'不起作用，因为转义了尖括号。 replaceChild无法工作，因为'<em>keyword</em> is highlighted'之类的东西不是单个节点，而是实际上是节点的集合，我不想将它们包装到一个节点中。
答案 0 :(得分：2)
一些基本的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);
}
这仅适用于包含包含单个关键字的单个文本节点的元素的特定情况。有关更一般的解决方案，请参阅