title: Autostyle input text in contenteditable div while typing
body: <p>I am making a text editor, and I want to have a feature, such that while typing, if the user enters some keyword (e.g. happy, sad), the word is automaticly styled (e.g. color changed). How might I go about doing this?</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.getElementById('texteditor').addEventListener('keyup', function(e) {
    styleCode(); //Style the text input
  });
  
  //Change the result of pressing Enter and Tab keys
  document.getElementById('texteditor').addEventListener('keydown', function(e) {
    switch (e.key) {
              case 'Tab':
                  e.preventDefault();
                  document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
                  break;
  
              case 'Enter':
                  e.preventDefault();
                  document.execCommand("insertLineBreak"); //Insert a new line
                  break;
          }
  });
  
  function styleCode(){
    //Style the code in the input box
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#texteditor {
    border: 3px solid black;
    width:100%;
    height: 500px;;
    overflow:auto;
    flex:1;
      word-wrap: break-word;
    word-break: break-all;
      white-space:pre-wrap;
    padding:5px;
    font-family: Consolas,"courier new";
      font-size:14px;
  }
  
  .styleA {
    color:red;
  }
  
  .styleB {
    color:blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='texteditor' contenteditable&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Basically, when the user fully types &quot;happy&quot; (upon releasing the 'y' key) the word &quot;happy&quot; should turn red (using the styleA CSS class) in the editor. A similar thing should happen when the user finishes typing &quot;sad&quot;; the word &quot;sad&quot; should turn blue using the styleB CSS class.</p>
  <p>Thanks in advance for any help.</p>