在jQuery中替換選定的HTML文本

Question

我有這個代碼替換選定的文本:(它在所選文本之前和之后推桿“1”和“2”）：

var content=$("#text").html();
if (window.getSelection) {
 // not IE case
 var selObj = window.getSelection(); 
 var selRange = selObj.getRangeAt(0);

 content2 = content.substring(0,selRange.startOffset) + "1" + content.substring(selRange.startOffset,selRange.endOffset) + "2" + content.substring(selRange.endOffset,content.length);
 $("#content").html(content2);
 selRange.removeAllRanges();
} else if (document.selection && document.selection.createRange && document.selection.type != "None") {
 // IE case
 range = document.selection.createRange();
 var selectedText = range.text; 
 var newText = '1' + selectedText + '2'; 
 document.selection.createRange().text = newText; 
}

和HTML：

<div id="text">aaa as asd das d</div>

這適用於“純”文本，但如果我的HTML看起來像這樣（粗體文本）

<div id="text">aaa as <b>asd</b> das d</div>

它在firefox中崩潰，因為selRange.startOffset對象沒有返回所需的位置...

還有一個問題......在IE中，這可以正常使用粗體和“普通”文本但是因為對於IE我沒有使用jquery html（）函數 - 文本不能用HTML代碼替換。 因此，如果我想使用“<b>”和“</ b>”而不是“1”和“2”，則文本不會像firefox中那樣以粗體顯示。

這兩個問題能解決嗎？

Answer 1

startOffset和endOffset在當前節點的偏移，得到它，你需要range.startContainer和range.endContainer 。

編輯：如果startContainer和endContainer處於同一級別（保留DOM樹結構），它的工作正常。

EDIT2：現在它使每個選定的文本變為粗體。

我還重寫了IE部分，現在它在HTML上運行，所以它很好。

http://jsfiddle.net/FYJtN/11/

if (window.getSelection) {
    // not IE case
    var selObj = window.getSelection();
    var selRange = selObj.getRangeAt(0);

    var newElement = document.createElement("b");
    var documentFragment = selRange.extractContents();
    newElement.appendChild(documentFragment);
    selRange.insertNode(newElement);

    selObj.removeAllRanges();
} else if (document.selection && document.selection.createRange && document.selection.type != "None") {
    // IE case
    var range = document.selection.createRange();
    var selectedText = range.htmlText;
    var newText = '<b>' + selectedText + '</b>';
    document.selection.createRange().pasteHTML(newText);
}