Замена выделенного текста HTML в JQuery

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> 

Он ломается в светлячок, потому что selRan Объект ge.startOffset не возвращает желаемое местоположение ...

И еще один вопрос ... В IE это отлично работает с жирным и «нормальным» текстом, но поскольку для IE я не использую функцию jquery html() текст не может быть заменен HTML-кодом. Поэтому, если я хочу использовать «< b>» и «</b>», а не «1» и «2», текст не будет выделен жирным шрифтом в Firefox.

Можно ли устранить эту проблему?

Answer 1

startOffset и endOffset являются смещениями в текущем узле, для его получения range.startContainer и range.endContainer.

EDIT: Он работает хорошо, если 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); 
}