JSFiddle - React, Tailwind, and code Playground

HTML

<section id="textarea" contenteditable="true" onkeypress="myFunction();">
    <h2>Go ahead, edit away!</h2>
    <p>Here's a typical paragraph element</p>
    <ol>
      <li>and 'now' a Number of new items for you</li>
      <li>with only instanceof "trash"</li>
      <li>three items while testing</li>
        <li>if anybody 'is' here, hello echo?</li>
        <li>do continue while in break foreach window</li>
    </ol>
  </section>

<button onclick="myFunction();">myFunction()</button>

JavaScript

var strReg1 = /"(.*?)"/g,
    strReg2 = /'(.*?)'/g,
    specialReg = /\b(new|var|if|do|function|while|switch|for|foreach|in|continue|break)(?=[^\w])/g,
    specialJsGlobReg = /\b(document|window|Array|String|Object|Number|\$)(?=[^\w])/g,
    specialJsReg = /\b(getElementsBy(TagName|ClassName|Name)|getElementById|typeof|instanceof)(?=[^\w])/g,
    specialMethReg = /\b(indexOf|match|replace|toString|length)(?=[^\w])/g,
    specialPhpReg  = /\b(define|echo|print_r|var_dump)(?=[^\w])/g,
    specialCommentReg  = /(\/\*.*\*\/)/g,
    inlineCommentReg = /(\/\/.*)/g;

var htmlTagReg = /(&lt;[^\&]*&gt;)/g;




function myFunction() {
  var str = document.getElementById("textarea").innerHTML; 
  document.getElementById("textarea").innerHTML = str.replace(strReg1, '<font color="red">"$1"</font>').replace(strReg2,'<font color="green">\'$1\'</font>').replace(specialReg,'<font color="blue">$1</font>');
}