关于javascript：如何使用html标签包装window.getSelection()。getRangeAt(0)中的文本选择？


How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?

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

我可以使用警报输出所选文本，但尚未弄清楚如何用其他标记将其包围。 我已经看到了很多在所选内容上运行execCommand的示例，但这不是我想要的。

在jsfiddle上查看我的工作示例

有任何想法吗？ 谢谢

相关讨论

如果所选文本全部包含在单个文本节点中，则可以使用Range的surroundContents()方法。但是，这在一般情况下不起作用。要做的是将范围内的每个文本节点包围在中。我的Rangy库具有执行此操作并可以跨浏览器运行的模块(IE <= 8本身不支持DOM Range)。

使用Rangy的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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();
    }
相关讨论

(根据我发布我的类似问题回答我自己的问题...)

这个问答环节中的家伙们走的很有趣。它只是使用了与我想要的格式不同的格式。修改他们的代码，我能够执行以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Display Range |
Mark Range


    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.


<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/

相关讨论

首先得到范围：

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

在按钮上单击：

1
2
3
4
   function formatCode(e){
        var textAreaVal = document.getElementById('divWithContentEditable').innerText;
        if(textAreaVal.length>0){
            var newtxt = '[cc lang="javascript"]'+savedRange+'

'
replaceIt($('＃topicDetails')[0]，newtxt);
}
}

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

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

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