如何用元素包装/环绕突出显示的文本

Question

我想将选定的文本包装在具有span的div容器中，可以吗？

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

Answer 1

如果所选内容完全包含在单个文本节点中，则可以使用surroundContents()从所选内容中获得的范围的方法来执行此操作。但是，这非常脆弱：如果选择不能在逻辑上包围在单个元素中（通常，如果范围跨越节点边界，尽管这不是精确的定义，则它不起作用。在一般情况下，要执行此操作，您需要一种更复杂的方法。

此外，IE <9中不支持DOMRange和window.getSelection()。对于这些浏览器，您将再次需要另一种方法。您可以使用我自己的Rangy之类的库来规范浏览器行为，并且您可能会发现该类应用程序模块对该问题很有用。

码：

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);
        }
    }
}