Get All Text Before Selectionstart And After Selectionend

I am creating a text editor from scratch. code for getting bold $('#bold').click(function(){ var start = window.getSelection().toString(); var bolded = '

Solution 1:

As @weBBer said you will not allowed to add tag inside textarea element use div with attribute contenteditable="true" instead

$('#bold').click(function(){
  var string = window.getSelection().toString();
  var bolded = '<b>' + string + '</b>';
  var selC, range;
      if (window.getSelection) {
          selC = window.getSelection();
          if (selC.rangeCount) {
              range = selC.getRangeAt(0);
              range.deleteContents();
              range.insertNode(document.createTextNode(bolded));
          }
      } elseif (document.selection && document.selection.createRange) {
          range = document.selection.createRange();
          range.text = bolded;
      }
}); 

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablewidth="50%"><tr><td><div><div><span><inputtype=buttonvalue="B"id="bold"></span></div><divcontenteditable="true"style="height: 300px;width: 300px;border: 1px solid black"></div></div></td></tr></table>