如何突出显示DOM Range对象的文本？

Question

我使用鼠标在html页面（在firefox中打开）上选择一些文本，并使用javascript函数创建/获取与所选文本相对应的rangeobject。 userSelection =window.getSelection();  var rangeObject = getRangeObject(userSelection);现在我要突出显示rangeobject下的所有文本。  var span = document.createElement("span");  rangeObject.surroundContents(span);  span.style.backgroundColor = "yellow";好吧，这仅在rangeobject（起点和终点）位于同一textnode时才有效，然后突出显示相应的文本。    <p>In this case,the text selected will be highlighted properly,       because the selected text lies under a single textnode</p>但是，如果range对象覆盖多个文本节点，则它不能正常工作，它仅突出显示第一个textnode中的文本，例如 <p><h3>In this case</h3>, only the text inside the header(h3)   will be highlighted, not any text outside the header</p> 我不知道如何确定范围对象下的所有文本，突出显示范围范围是单个节点还是多个节点？谢谢....

Answer 1

Rangy是一个跨浏览器范围和选择库，可通过其CSS Class Applier模块完美解决此问题。我正在使用它在各种桌面浏览器和iPad上实现突出显示，并且效果很好。

Tim Down的答案很好，但是Rangy让您不必自己编写和维护所有功能检测代码。

Answer 2

您可以尝试为周围范围添加一个类并应用分层CSS吗？

var span = document.createElement("span");

span.className="selection";

rangeObject.surroundContents(span);

在CSS定义中，

span.selection, span.selection * {

   background-color : yellow;  

}

我没有尝试。但是只是猜测它会起作用。