用span展开选定的文本节点
我想将选定的文本包装在带有span的div容器中，这有可能吗？
用户将选择一个文本，并点击一个按钮，在按钮点击事件我想用span元素来包装选定的文本。 我可以使用window.getSelection()获取选定的文本，但是如何知道它在DOM结构中的确切位置？
如果选择完全包含在单个文本节点中，则可以使用从选择中获得的范围的surroundContents()方法执行此操作。 然而，这是非常脆弱的：如果选择无法逻辑地包含在单个元素中（通常，如果范围跨越节点边界，尽管这不是精确的定义），但它不起作用。 要在一般情况下这样做，您需要更复杂的方法。
另外，在IE <9中不支持DOM Range和window.getSelection() 。对于这些浏览器，您将需要另一种方法。 您可以使用我自己的Rangy之类的库来规范浏览器行为，并且您可能会发现类应用程序模块对此问题很有用。
简单的surroundContents()示例jsFiddle：http://jsfiddle.net/VRcvn/
码：
function surroundSelection(element) {
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(element);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
function wrapSelectedText() {
var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span= document.createElement("span");
span.style.backgroundColor = "yellow";
span.appendChild(selectedText);
selection.insertNode(span);
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus gravida magna, quis interdum magna mattis quis. Fusce tempor sagittis varius. Nunc at augue at erat suscipit bibendum id nec enim. Sed eu odio quis turpis hendrerit sagittis id sit amet justo. Cras ac urna purus, non rutrum nunc. Aenean nec vulputate ante. Morbi scelerisque sagittis hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla tristique ligula fermentum tortor semper at consectetur erat aliquam. Sed gravida consectetur sollicitudin.
<input type="button" onclick="wrapSelectedText();" value="Highlight" />有可能的。 您需要使用范围API和Range.surroundContents（）方法。 它将内容所包含的节点放置在指定范围的开始处。 请参阅https://developer.mozilla.org/en/DOM/range.surroundContents
链接地址: http://www.djcxy.com/p/41627.html