Question

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

我可以使用alert输出所选文本，但尚未弄清楚如何使用其他标记来包围它。我已经看到很多关于选择运行execCommand的例子，但这不是我想要的。

上的工作示例

有什么想法吗？感谢

Answer 1

如果所选文本全部包含在单个文本节点中，则可以使用Range的surroundContents()方法。但是，这在一般情况下不起作用。要做的是围绕范围内的<span>中的每个文本节点。我的Rangy库有a module that does this并且跨浏览器工作（IE＆lt; = 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>

Answer 2

（根据我发布的时候发现的类似问题回答我自己的问题......）

The guys in this Q&A thread在一条有趣的轨道上。它只使用了与我想要的格式不同的格式。修改他们的代码，我能够做到以下几点：

<h3><a href="#" id="btnRange">Display Range</a> |
<a href="#" id="btnMark">Mark Range</a></h3>

<div contenteditable="true" id="editor">
    This is sample text. You should be able to type in this box or select anywhere in this div and then click the link at the top to get the selected range.
</div>

<script type="text/javascript">
    var btnDisplay = $("#btnRange"),
        btnMark = $("#btnMark");

    btnDisplay.click(function() {
        alert(window.getSelection().getRangeAt(0));
        return false;
    });

    btnMark.click(function() {
        var range = window.getSelection().getRangeAt(0);
        var newNode = document.createElement("mark");
        range.surroundContents(newNode);
        return false;
    });

我可以进一步抽象btnMark.click（）函数中的代码来接受标记名称，然后创建一行按钮，用mark，pre，blockquote标记代码。

可在此处找到有效的解决方案：http://jsfiddle.net/3tvSL/

Answer 3

首先得到范围：

var savedRange;
savedRange = window.getSelection().getRangeAt(0);

点击按钮：

   function formatCode(e){
        var textAreaVal = document.getElementById('divWithContentEditable').innerText;
        if(textAreaVal.length>0){
            var newtxt = '<pre><code>'+savedRange+'</code></pre>'
            replaceIt($('#topicDetails')[0], newtxt);
        }
    }

在文字周围添加/替换元素：

replaceIt(txtarea, newtxt) {
    $(txtarea).text(newtxt));  
}

当然，您可以使用Rangy，但我发现不建议为简单要求添加额外的500kb。

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

3 个答案: