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

问题描述

我使用鼠标在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（起始点和终点）位于同一个文本节点的时候，那么它会突出显示相应的文本.Ex 
 < p>在这种情况下，所选的文本将被正确突出显示，
，因为所选文本位于单个文本节点< / p>下
  
但是，如果range对象涵盖多个textnode，那么它不工作，位于第一个文本节目的文本，例如
 < p>< h3>在这种情况下，< / h3>标题（h3）
中的文本将被突出显示，标题之外的任何文本< / p> 
  
任何想法，我可以做什么，所有的文本在rangeobject下，突出显示，独立于范围位于单个节点或多个节点？ 
谢谢.... 
解决方案
我建议使用文档或 TextRange 的 execCommand 方法，这是为了这样的目的而建立的，但通常用于可编辑文档。以下是我给出类似问题的答案：
 
 
 
以下内容应该做你想要的。在非IE浏览器中，它会打开designMode，应用背景颜色，然后再次切换designMode。
 
 
 
 更新 
 
 
 
修正为在IE 9中工作。
 
 
 
 更新2013年9月12日 
 
 
 
这是一个链接，详细说明了删除由此方法创建的突出显示的方法：
 
 
 
  https://stackoverflow.com/a/8106283/96100  
  function makeEditableAndHighlight（ color）{
 var range，sel = window.getSelection（）; 
 if（sel.rangeCount&& sel.getRangeAt）{
 range = sel.getRangeAt（0）; 
} 
 document.designMode =on; 
 if（range）{
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
} 
 //使用HiliteColor，因为某些浏览器将BackColor应用到整个块
 if（！document.execCommand（HiliteColor，false，color））{
 document.execCommand （BackColor，false，color）; 
} 
 document.designMode =off; 
} 
 
功能高亮（color）{
 var range; 
 if（window.getSelection）{
 // IE9和非IE 
尝试{
 if（！document.execCommand（BackColor，false，color））{
 makeEditableAndHighlight（color）; 
} 
} catch（ex）{
 makeEditableAndHighlight（color）
} 
} else if（document.selection&& document.selection.createRange）{ 
 // IE< = 8 case 
 range = document.selection.createRange（）; 
 range.execCommand（BackColor，false，color）; 
} 
} 
  
 
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";
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>
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....  
解决方案
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:

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.

UPDATE

Fixed to work in IE 9.

UPDATE 12 September 2013

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屋！