title: Javascript window.getSelection().focusNode.nodeValue return with HTML
body: <p>Hy... i dont really want to use other poeple editor...</p>
  
  <p>i want to learn "how to create" not "how to use"</p>
  
  <p>so i decided to create my own editor...</p>
  
  <p><a href="https://i.stack.imgur.com/zxTlJ.png" rel="nofollow noreferrer">My editor</a></p>
  
  <p>its easy to create bbcode editor...
  but when i try to create the HTML Version ( Live Preview &amp; Editing )</p>
  
  <p>i have a little problem ( may be my biggest problem )
  Of course making a question is my last hope after searching...</p>
  
  <p>anyway, my english is bad, so i hope you can understand what i'm saying.</p>
  
  <p>Look, My Expectation VS Really</p>
  
  <p><a href="https://i.stack.imgur.com/Ncf8t.png" rel="nofollow noreferrer">Expectation VS Really</a></p>
  
  <p>And this is the simplest of my editor</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   $(".buttonBold").click(function(){
    $(".editableDiv").focus();
    var help_me_anchorNode    = window.getSelection().anchorNode.nodeValue;
    var help_me_anchorOffset   = window.getSelection().anchorOffset
    var help_me_focusOffset   = window.getSelection().focusOffset
    var help_me_focusNodeValueLength  = window.getSelection().focusNode.nodeValue.length;
    var help_me_firstTag    = "&lt;b&gt;";
    var help_me_lastTag    = "&lt;/b&gt;";
  
    if(help_me_anchorOffset &gt; help_me_focusOffset){
     var help_me_firstTag   = "&lt;/b&gt;";
     var help_me_lastTag   = "&lt;b&gt;";
    }
    window.getSelection().anchorNode.nodeValue = help_me_anchorNode.slice(0, help_me_anchorOffset) + help_me_firstTag + help_me_anchorNode.slice(help_me_anchorOffset);
    var help_me_focusNodeValue = window.getSelection().focusNode.nodeValue;
    if(window.getSelection().focusNode.nodeValue.length - help_me_focusNodeValueLength &gt; 0) {
     help_me_focusOffset += window.getSelection().focusNode.nodeValue.length - help_me_focusNodeValueLength;
    }
    window.getSelection().focusNode.nodeValue = help_me_focusNodeValue.slice(0, help_me_focusOffset) + help_me_lastTag + help_me_focusNodeValue.slice(help_me_focusOffset);
   });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.editableDiv{
   width: 300px;
   height: 100px;
   background: #ccc;
   padding: 10px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;button class="buttonBold"&gt;Bold&lt;/button&gt;
  &lt;div class="editableDiv" contenteditable="true"&gt;
  Double click this : HELPME
  &lt;br /&gt;
  &lt;br /&gt;
  And then, click the "Bold" Button
  &lt;br /&gt;
  The result will : &amp;lt;b&amp;gt;HELPME&amp;lt;/b&amp;gt;
  &lt;br /&gt;
  Not : &lt;b&gt;HELPME&lt;/b&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>