Change background color of individual characters in textarea?

Question

I'm making a brainfuck interpreter (brainfuck is a programming language consisting of 8 symbols, those are ,.+-<>[] )

Is there a way to color the background of individual characters in a HTML text area through JavaScript?

Let's say my text area contains "hello world". I'd like to be able to tell it to color the 3rd letter, so it would show "he*l*lo world" (using bold here to illustrate color because I don't know how to include colors in the Stack Overflow editor).

Does anyone know how to do this, or if it's possible at all? Any help would be greatly appreciated :=)

Answer 1

I think Mukul planted the seed in my head, but would something like this be useful:

$(document).ready(function() {
  $("#editor").keyup(function() {
    var plaincontent = $("#editor").val();
    var richcontent = "";

    for (var i = 0; i < plaincontent.length; i++) {
      if (plaincontent.charAt(i) == "[") {
        richcontent = richcontent + "<span style='color:#f00'>[</span>";
      } else {
        richcontent = richcontent + plaincontent.charAt(i);
      }
    }
    $("#render").html(richcontent);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<textarea id="editor"></textarea>
<div id="render"> </div>

It basically takes what you enter in the textarea and spits it out in the div below, but wraps it in spans depending on which character you enter. In the demo above, the [ character will be presented in red.

You'll have to tweak it for all the different legal characters.