title: How to set the value of where the caret is to a value [Javascript]
body: <p>I want to change the value of the char at the index of the caret to "[br]". 
  <br>
  example of what i mean:
  lets say we have a textbox and a user enters some text, after a while he remembered that he forgot to start a new line, so he moves his caret to the location where he wants a new line and press return\enter. i want to add to that point the string "[br]", using javascript only. here is what i got now:</p>
  
  <pre><code>&lt;textarea id="textarea" onkeydown="javascript:DoLine();"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>And here is the <code>DoLine()</code> function:</p>
  
  <pre><code>    function DoLine() {
      if (event.keyCode == 13) {
        var text = document.getElementById('textarea').value;
        text += "[br]";
        if (text.indexOf("[br]") != text.length) {
          var getTextAfter = text[text.lastIndexOf("[br]")] += "\r";
        }
        document.getElementById('textarea').value = text;
      }
    }
  </code></pre>
  
  <p>this code adds the "[br]" at the end of the textarea instade of where the caret is. I dont really know how to get the index of the caret so i could just convert the <code>text</code> var into an array of chars then add "[br]" at the index of the caret.
  So anyone got any idea of how can I make my code work the way i wanted it to? or any idea how to get the caret location? 
  <br> PS: by caret i mean this:<br>
  <img src="https://i.stack.imgur.com/ERmJl.png" alt="enter image description here">
  <br> Thank you :)</p>