title: Javascript: Change word colors depending on the word?
body: <p>I want to change the background color of words in a sentence depending on what the word is.</p>
  <p>I want the user to be able to enter words like with a text area, but text areas don't support word background colors.</p>
  <p>At the moment I can only think of bootleg solutions such as 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>var div = document.getElementById("div");
  
  function highlight() {
    var words = div.textContent.split(" ");
    div.innerHTML = "";
    for (var i = 0; i &lt; words.length; i++) {
      if (words[i] === "good") {
        div.innerHTML += "&lt;span style=\"background-color: green;\"&gt;" + words[i] + "&lt;/span&gt; ";
      } else if (words[i] === "bad") {
        div.innerHTML += "&lt;span style=\"background-color: red;\"&gt;" + words[i] + "&lt;/span&gt; ";
      } else {
        div.innerHTML += "&lt;span&gt;" + words[i] + "&lt;/span&gt; ";
      }
    }
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(div.lastChild, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  };
  div.addEventListener("input", highlight);
  highlight();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background-color: black;
    box-sizing: border-box;
    color: white;
    height: 128px;
    padding: 16px;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div" contenteditable="true"&gt;good and bad colors&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The word 'good' gets a green background, and the word 'bad' gets a red background.</p>
  <p>However, this is very glitchy and horrible, so I'm hoping there is a better way do do this.</p>
  <p>Any help would be fantastic!</p>