相关疑难解决方法(0)

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

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

 userSelection =window.getSelection(); 
 var rangeObject = getRangeObject(userSelection);
Run Code Online (Sandbox Code Playgroud)

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

  var span = document.createElement("span");
  rangeObject.surroundContents(span);
  span.style.backgroundColor = "yellow";
Run Code Online (Sandbox Code Playgroud)

好吧,这个工作正常,只有当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>
Run Code Online (Sandbox Code Playgroud)

但是如果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> 
Run Code Online (Sandbox Code Playgroud)

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

javascript dom range highlight

15
推荐指数
2
解决办法
1万
查看次数

标签 统计

dom ×1

highlight ×1

javascript ×1

range ×1