如何突出显示 DOM Range 对象的文本? [英] How can I highlight the text of the DOM Range object?

问题描述

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

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.

 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,

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

嗯，这很好用，只有当范围对象(起点和终点)位于同一个文本节点时，才会突出显示相应的文本.Ex

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

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

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

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

 <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....

推荐答案

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

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:

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

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 9 中使用.

Fixed to work in IE 9.

2013 年 9 月 12 日更新

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

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

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);
    }
}

这篇关于如何突出显示 DOM Range 对象的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！