我想将一个选定的文本包装在带有span的div容器中,是否可能？

用户将选择文本并单击按钮,在按钮单击事件上我想用span元素包装所选文本.我可以使用window.getSelection()获取所选文本但是如何知道它在DOM结构中的确切位置？

解决方法:

如果选择完全包含在单个文本节点中,则可以使用从选择中获得的范围的surroundContents()方法执行此操作.但是,这非常脆弱：如果选择不能在逻辑上包围在单个元素中(通常,如果范围跨越节点边界,虽然这不是precise definition),它不起作用.要在一般情况下执行此操作,您需要一种更复杂的方法.

此外,IE< IE中不支持DOM Range和window.getSelection(). 9.对于那些浏览器,您还需要另一种方法.您可以使用我自己的Rangy等库来规范浏览器行为,您可能会发现class applier module对此问题很有用.

简单的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);
        }
    }
}