我使用鼠标在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下的文本,突出显示,独立于范围是在单个节点还是多个节点?谢谢....