title: Replacing selected HTML text in jQuery
body: <p>I have this code for replacing selected text: (it putts "1" and "2" before and after selected text):</p>
  
  <pre><code>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 &amp;&amp; document.selection.createRange &amp;&amp; document.selection.type != "None") {
   // IE case
   range = document.selection.createRange();
   var selectedText = range.text; 
   var newText = '1' + selectedText + '2'; 
   document.selection.createRange().text = newText; 
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div id="text"&gt;aaa as asd das d&lt;/div&gt;
  </code></pre>
  
  <p>This works well with "pure" text, but if my HTML looks like this (bolded text)</p>
  
  <pre><code>&lt;div id="text"&gt;aaa as &lt;b&gt;asd&lt;/b&gt; das d&lt;/div&gt;
  </code></pre>
  
  <p>It breaks down in firefox, because selRange.startOffset object is not returning desired location... </p>
  
  <p>And another question... In IE this is working fine with bolded and "normal" text but since for IE I'm not using jquery html() function - text can't be replaced with HTML code. So if I want to use "&lt; b>" and "&lt; /b>" rather than "1" and "2", text would not be bolded like that in firefox. </p>
  
  <p>Can this two problems be fixed?</p>