如何使用html标记从window.getSelection().getRangeAt(0)中包装文本选择？

Question

如何从window.getSelection().getRangeAt(0)中选择并用HTML标记(例如'span'或'mark')将其包围？我更喜欢直接的javascript或jQuery解决方案.

我能够使用警报输出所选文本,但还没有弄清楚如何用额外的标记来包围它.我已经看到很多关于选择运行execCommand的例子,但这不是我想要的.

请参阅jsfiddle的工作示例

有任何想法吗？谢谢

Answer 1

如果所选文本全部包含在单个文本节点中,则可以使用surroundContents()Range 的方法.但是,这在一般情况下不起作用.要做的是围绕范围内的每个文本节点<span>.我的Rangy库有一个模块,可以执行此操作并跨浏览器工作(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>