javascript - 如何使用 html 标记包装来自 window.getSelection().getRangeAt(0) 的文本选择？

Question

如何从 window.getSelection().getRangeAt(0) 中进行选择并用 HTML 标记(如“span”或“mark”)包围它？我更喜欢直接的 javascript 或 jQuery 解决方案。

我能够使用警报输出选定的文本，但还没有弄清楚如何用额外的标记包围它。我已经看到很多在选择上运行 execCommand 的例子，但这不是我要找的。

在 jsfiddle 查看我的工作示例

有什么想法吗？谢谢

Answer 1

如果所选文本全部包含在单个文本节点中，您可以使用 surroundContents() 范围的方法。但是，这在一般情况下不起作用。要做的是将范围内的每个文本节点包围在 <span> 中。 .我的Rangy图书馆有a module that does this并跨浏览器工作(IE <= 8 本身不支持 DOM 范围)。

使用 Rangy 的示例代码:

<style type="text/css">
    span.highlighted {
        background-color: yellow;
    }
</style>
<script type="text/javascript">
    var highlightApplier;

    window.onload = function() {
        rangy.init();
        highlightApplier = rangy.createCssClassApplier("highlighted ", true);
    };

    function applyHighlight() {
        highlightApplier.applyToSelection();
    }
</script>