title: How do you replace the color of regions of text in a content editable element?
body: <p>Let's suppose I have a content editable <code>pre</code> tag and a button, like this:</p>
  
  <pre><code>&lt;pre id="input" contenteditable&gt;
  hello world!
  how is everything today?
  
  I like cherries
  &lt;/pre&gt;
  &lt;button id="colorify"&gt;Colorify!&lt;/button&gt;
  </code></pre>
  
  <p>When the <code>colorify</code> button is pressed, I would like the text to alternate between three different colors by character. It should look something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/V1YDl.png" alt="enter image description here"></p>
  
  <p>This is my intention, expressed in pseudo-Javascript:</p>
  
  <pre><code>$("#colorify").click(function() {
    var input = $("#input"), text = input.text(),
     colors = ["#FF0000", "#00FF00", "#0000FF"];
    for (var i = 0; i &lt; text.length; i++) {
      input.changeColorOfRange(i, 1, colors[i % 3]);
    }
  });
  </code></pre>
  
  <p>Unfortunately, there is no <code>changeColorOfRange</code> function that accepts a character index, a string length, and a color to do this.</p>
  
  <p>I've seen RTF editors in Javascript, and I've looked into some of their APIs, but they only seem to allow changing the color of selected text, instead of programatically changing the color of arbitrary regions of text.</p>
  
  <p>How can I programmatically change the color of arbitrary regions of text inside of a contenteditable element?</p>