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

Posted 2023-03-06

【中文标题】如何突出显示 DOM Range 对象的文本？

【英文标题】：How can I highlight the text of the DOM Range object?

【发布时间】：2011-02-04 16:27:26

【问题描述】：

我使用鼠标在 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>

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

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

知道如何制作范围对象下的所有文本，突出显示，与范围位于单个节点还是多个节点无关？ 谢谢……

【问题讨论】：

可能重复：***.com/questions/1622629/…

【参考方案1】：

能否请您详细说明此功能的需求。如果您只想更改所选文本的突出显示样式，可以使用 CSS: '::selection'

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

【讨论】：

我想永久突出显示一些文本（这里永久意味着直到我关闭应用程序，与您的建议完全相反，当您单击其他地方时，“突出显示”消失），并且动态（意味着我不想使用文本编辑器打开 html 文件并在那里插入一些元素）

【参考方案2】：

您可以尝试为周围的 span 添加一个类并应用分层 CSS 吗？

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

在 CSS 定义中，

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

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

【讨论】：

你觉得怎么比 span.style.backgroundColor = "yellow" this 好？

它与 span.style.background 没有什么不同。但是我提供的分层 CSS “span.selection *”会解决你的问题。

【参考方案3】：

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

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

更新

固定在 IE 9 中工作。

2013 年 9 月 12 日更新

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

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

【讨论】：

@crizCraig：在click 事件触发时，选择可能已被破坏。您可以改用mousedown 事件。

如果您试图通过单击突出显示按钮来触发它，这在 IE 中将不起作用。您只需要使用此问题的答案将选择保存在 mouseup 上。 ***.com/questions/5767037/…

@crizCraig：在以下简单情况下，我在 IE 中工作正常：jsfiddle.net/LPnN2

@TimDown ***.com/q/18721005/1503130 我在这里遇到了类似的问题

@Tim Down ：我们如何在执行给定代码后撤消选择（突出显示）。 ?

【参考方案4】：

Rangy 是一个跨浏览器范围和选择库，它的CSS Class Applier module 完美地解决了这个问题。我正在使用它在一系列桌面浏览器和 iPad 上实现突出显示，它运行良好。

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

【讨论】：

我刚刚注意到Tim Down is the author of Rangy。 :)

【参考方案5】：

var userSelection = document.getSelection();
var range = userSelection.getRangeAt(0);

您可以通过这种方式使用 appendChild 和 extractContents 方法来代替环绕内容方法：

let newNode = document.createElement('mark');
newNode.appendChild(range.extractContents());
range.insertNode(newNode);

function markNode() 
if(document.getSelection() && document.getSelection().toString().length)
let range = document.getSelection().getRangeAt(0);
let newNode = document.createElement('mark');
      newNode.appendChild(range.extractContents());
      range.insertNode(newNode);

else
alert('please make selection of text to mark');



function resetContent() 
      testMe.innerHTML = `Remember: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node">Read</a> and <strong>stay strong</strong>`;

<p id="testMe">Remember: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node">Read</a> and <strong>stay strong</strong></p>


<div><button onclick="markNode()">markNode</button></div>
<div><button onclick="resetContent()">resetContent</button></div>