小编典典

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

javascript

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

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


阅读 275

收藏
2020-05-01

共1个答案

小编典典

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

此外,IE <9中不支持DOMRangewindow.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);
        }
    }
}
2020-05-01