Replacing selected HTML text in jQuery

Question

I have this code to replace the selected text: (it putts "1" and "2" before and after the selected text):

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

And HTML:

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

This works well with clean text, but if my HTML looks like this (bold text)

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

It breaks down on firefox because the selRange.startOffset object does not return the desired location ...

And one more question ... In IE, this works fine with bold and "normal" text, but since I do not use the jquery html () function for IE, the text cannot be replaced with HTML code. Therefore, if I want to use "<b>" and "</b>" rather than "1" and "2", the text will not be bold in Firefox.

Can this problem be fixed?

Answer 1

startOffset endOffset node, 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);
}