javascript - 如何用元素包裹/包围突出显示的文本

Question

我想用 span 将选定的文本包装在一个 div 容器中，这可能吗？

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

Answer 1

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

此外，IE < 9 不支持 DOM Range 和 window.getSelection()。对于这些浏览器，您将再次需要另一种方法。您可以使用我自己的库 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);
        }
    }
}