我如何突出显示DOM Range对象的文本？
我使用鼠标在html页面上选择了一些文本（在Firefox中打开），并使用javascript函数创建/获取与所选文本对应的rangeobject。
userSelection =window.getSelection();
var rangeObject = getRangeObject(userSelection);
现在我想突出显示范围对象下的所有文本。我是这样做的，
var span = document.createElement("span");
rangeObject.surroundContents(span);
span.style.backgroundColor = "yellow";
那么，这工作正常，只有当rangeobject（起点和终点）位于同一个文本节点时，它才会突出显示相应的文本.Ex
<p>In this case,the text selected will be highlighted properly,
because the selected text lies under a single textnode</p>
但是，如果rangeobject覆盖多个文本节点，则它不起作用，它仅突出显示位于第一个文本节点的文本，Ex
<p><h3>In this case</h3>, only the text inside the header(h3)
will be highlighted, not any text outside the header</p>
任何想法我怎样才能使范围对象下的所有文本突出显示，而不管范围是位于单个节点还是多个节点？ 谢谢....
我建议使用document或TextRange的execCommand方法，它只是为了这个目的而构建的，但通常用于可编辑的文档。 这是我给类似问题的答案：
以下应该做你想要的。 在非IE浏览器中，它会打开designMode，应用背景颜色，然后再次将designMode关闭。
UPDATE
固定在IE 9中工作。
更新2013年9月12日
以下是一个链接，详细介绍了删除由此方法创建的高亮部分的方法：
https://stackoverflow.com/a/8106283/96100
function makeEditableAndHighlight(colour) {
var range, sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}
function highlight(colour) {
var range;
if (window.getSelection) {
// IE9 and non-IE
try {
if (!document.execCommand("BackColor", false, colour)) {
makeEditableAndHighlight(colour);
}
} catch (ex) {
makeEditableAndHighlight(colour)
}
} else if (document.selection && document.selection.createRange) {
// IE <= 8 case
range = document.selection.createRange();
range.execCommand("BackColor", false, colour);
}
}
Rangy是一个跨浏览器的范围和选择库，它完美地解决了这个问题，它的CSS Class Applier模块。 我使用它在各种桌面浏览器和iPad上实现突出显示，并且完美运行。
Tim Down的回答很棒，但Rangy让您无需自己编写和维护所有功能检测代码。
你能否详细说明这个功能的需求。 如果您只想更改所选文字的突出显示样式，则可以使用CSS：':: selection'
更多信息：http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection
链接地址: http://www.djcxy.com/p/41629.html