javascript-<span>包含HTML标签的文本块在IE中

Question

我无法在Internet Explorer中找到它，但我希望能够用包含各种html标签的标签包装文本块。我正在编写一个突出显示功能，您可以用鼠标突出显示文本，并且突出显示的选项包含在<span>标记中。例如，请考虑下面的文本块（输入）：

<p>Lorem <i><b>ipsum dolor</b> sit amet</i>, consectetur <b>adipiscing elit</b>. Morbi</p> 
<p></p> 
<p>mperdiet, augue id sagittis porta, leo leo...</p> 

我所要的输出是（如果你是突出了整个事情）：

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

（和亮点可能是什么像：.highlight{background-color:yellow}例如）

我通过检索字符串：htmlStr = document.selection.createRange().htmlText;

最好的我可以找出迄今使用：

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

编辑：我也想分配另一个类到突出显示用于跟踪目的（id1在这种情况下）。

Answer 1

这在一般情况下很难实现（想想选择穿越元素的边界：单个<span>不能用于围绕这样的选择）。您可以使用document.execCommand()在所有主流浏览器中执行此操作。见我的答案在这里一个类似的问题：How can I highlight the text of the DOM Range object?

UPDATE

要与特定的类包装在<span>就是全部选择，你可以用我的Rangy库的CSS class applier module。它适用于所有主流浏览器。但是，每个应用程序对象只能处理一个类，所以您需要使用两个用于您的情况。示例代码：

<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();">