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

I select some text on the html page(opened in firefox) using mouse,and using javascript functions, i create/get the rangeobject corresponding to the selected text.

我使用鼠标在html页面上打开一些文本（在firefox中打开），并使用javascript函数，我创建/获取与所选文本对应的rangeobject。

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

Now i want to highlight all the text which comes under the rangeobject.I am doing it like this,

现在我想突出显示rangeobject下的所有文本。我这样做，

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

Well,this works fine, only when the rangeobject(startpoint and endpoint) lies in the same textnode,then it highlights the corresponding text.Ex

好吧，这个工作正常，只有当rangeobject（起始点和端点）位于同一个textnode中时，它才会突出显示相应的text.Ex

    <p>In this case,the text selected will be highlighted properly,
       because the selected text lies under a single textnode</p>

But if the rangeobject covers more than one textnode, then it is not working properlay, It highlights only the texts which lie in the first textnode,Ex

但是如果rangeobject涵盖多个textnode，那么它就不能正常工作，它只突出显示位于第一个textnode中的文本，Ex

 <p><h3>In this case</h3>, only the text inside the header(h3) 
  will be highlighted, not any text outside the header</p>

Any idea how can i make, all the texts which comes under rangeobject,highlighted,independent of whether range lies in a single node or multiple node? Thanks....

任何想法我怎么做，所有在rangeobject下的文本，突出显示，独立于范围是在单个节点还是多个节点？谢谢....

4 个解决方案

#1

I would suggest using document's or the TextRange's execCommand method, which is built for just such a purpose, but is usually used in editable documents. Here's the answer I gave to a similar question:

我建议使用document或TextRange的execCommand方法，它只是为了这个目的而构建的，但通常用在可编辑的文档中。以下是我对类似问题的回答：

The following should do what you want. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

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

UPDATE

UPDATE

Fixed to work in IE 9.

修复了在IE 9中工作。

UPDATE 12 September 2013

更新2013年9月12日

Here's a link detailing a method for removing highlights created by this method:

这是一个链接，详细说明了删除此方法创建的高光的方法：

https://*.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);
    }
}

#2

Rangy is a cross-browser range and selection library that solves this problem perfectly with its CSS Class Applier module. I'm using it to implement highlighting across a range of desktop browsers and on iPad and it works perfectly.

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

Tim Down's answer is great but Rangy spares you from having to write and maintain all that feature detection code yourself.

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

#3

Could you please elaborate the need of this functionality. If you only want to change the highlight style of the selected text you can use CSS: '::selection'

能否详细说明这项功能的需求。如果您只想更改所选文本的高亮样式，可以使用CSS：':: selection'

More Info: http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

更多信息：http：//www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

#4

Can you try adding a class for the surrounding span and apply hierarchical CSS?

你能尝试为周围的跨度添加一个类并应用分层CSS吗？

var span = document.createElement("span");
span.className="selection";
rangeObject.surroundContents(span);

In CSS definition,

在CSS定义中，

span.selection, span.selection * {
   background-color : yellow;  
}

I did not try it. But just guessing that it would work.

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

#1