javascript—如何在<；中包装文本块；span>；在IE中包含html标记

我无法在Internet Explorer中解决这个问题，但我希望能够用包含各种html标记的标记来包装文本块。我正在编写一个突出显示函数，在该函数中，您可以用鼠标突出显示文本，突出显示的选择被包装在一个

标记中。例如，考虑下面的文本块（作为输入）：

---

编辑：我还想为突出显示指定另一个类以进行跟踪（本例中为id1）。

在一般情况下，这是很难实现的（考虑跨越元素边界的选择：不能使用单个

来包围这样的选择）。您可以在所有主要浏览器中使用

document.execCommand（）

来执行此操作。请参见我对类似问题的回答：

更新

要使用特定类在

s中包装整个选择，可以使用my library的。它适用于所有主流浏览器。但是，每个applier对象只处理一个类，因此您需要在您的案例中使用两个类。示例代码：

<script type="text/javascript">
    var highlightApplier, idApplier;

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

    function toggleHighlight() {
        highlightApplier.toggleSelection();
        idApplier.toggleSelection();
    }
</script>

<input type="button" value="Toggle highlight"
    onclick="toggleHighlight();">

var highlightApplier，idApplier；
window.onload=函数（）{
rangy.init（）；
highlightApplier=rangy.createcscsclassapplier（“highlight”，true）；
idApplier=rangy.createCssClassApplication（“id1”，true）；
});
函数toggleHighlight（）{
highlightApplier.toggleSelection（）；
idApplier.toggleSelection（）；
}

这是一个很好的建议，但是我需要能够在突出显示部分附加一个“id”，以便跟踪。仅供参考，我使用类而不是id，因为我需要在所有突出显示中使用相同的“id”。我知道这样做是可能的，因为在Firefox/Chrome/Safari中有开源javascript代码可以让您这样做（用span标记包装文本块）。但是，该代码在IE中不起作用。execCommand是否允许您至少在整个突出显示周围添加标记？@James:

execCommand（）

的精确行为因浏览器而异。你心目中的开源代码是什么？谢谢！！这是一个非常棒的图书馆！我希望我能早点知道这件事！！

<p><span class='id1 highlight'>Lorem </span><i><b><span class='id1 highlight'>ipsum dolor</span></b><span class='id1 highlight'> sit amet</span></i><span class='id1 highlight'>, consectetur </span><b><span class='id1 highlight'>adipiscing elit</span></b><span class='id1 highlight'>. Morbi</span></p>
<p></p>
<p><span class='id1 highlight'>mperdiet, augue id sagittis porta, leo leo...</span></p>

document.selection.createRange().pasteHTML( "<span class='id1 highlight'>" + htmlStr + "</span>" );

<script type="text/javascript">
    var highlightApplier, idApplier;

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

    function toggleHighlight() {
        highlightApplier.toggleSelection();
        idApplier.toggleSelection();
    }
</script>

<input type="button" value="Toggle highlight"
    onclick="toggleHighlight();">