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

Question

我使用鼠标在 html 页面(在 firefox 中打开)上选择一些文本，并使用 javascript 函数创建/获取与所选文本对应的范围对象。

 userSelection =window.getSelection(); 
 var rangeObject = getRangeObject(userSelection);

现在我想突出显示范围对象下的所有文本。我是这样做的，

  var span = document.createElement("span");
  rangeObject.surroundContents(span);
  span.style.backgroundColor = "yellow";

好吧，这很好用，只有当范围对象(起点和终点)位于同一个文本节点时，它才会突出显示相应的文本。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> 

知道我怎样才能使范围对象下的所有文本突出显示，而不管范围是在单个节点还是多个节点中吗？ 谢谢....

Answer 1

我会建议使用 document 或 TextRange 的 execCommand 方法，它们就是为了这样的目的而构建的，但是通常用于可编辑文档。这是我对类似问题的回答:

下面应该做你想做的。在非 IE 浏览器中，它会打开 designMode，应用背景颜色，然后再次关闭 designMode。

更新

固定在 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);
    }
}