Question

我使用鼠标选择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（起点和终点）位于同一个textnode中时，它才会突出显示相应的text.Ex

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

但是如果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>

任何想法如何制作，范围对象下的所有文本都突出显示，与范围是单个节点还是多个节点无关？谢谢......

Answer 1

我建议使用document或TextRange的{{1}}方法，该方法仅用于此目的，但通常用于可编辑文档。以下是我对类似问题的回答：

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

<强>更新

已修复在IE 9中工作。

2013年9月12日更新

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

https://stackoverflow.com/a/8106283/96100

execCommand

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

在CSS定义中，

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

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

Answer 5

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

您可以通过以下方式使用appendChild和extractContents方法来代替SurroundContent方法：

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>

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

5 个答案: