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