3

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 :=)

strah
  • 6,702
  • 4
  • 33
  • 45
mort
  • 704
  • 2
  • 9
  • 21
  • 1
    No, that's not possible. You have to do this differently, e.g. by using a contenteditable div and wrapping each character in a `span`. You are looking for something like CodeMirror: http://codemirror.net/. I'm not exactly sure how they are doing it, but it looks good IMO. – Felix Kling Mar 01 '13 at 11:12
  • You would need to write your own wysiwyg type editor for textareas and then you would be able to use a regex or something to wrap the specified characters in spans and give them a class to colour them – Pete Mar 01 '13 at 11:15
  • In that, the characters themselves are colored though. I want to color the background of individual characters, but that's maybe the same process? – mort Mar 01 '13 at 11:31

2 Answers2

3

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

<textarea id="editor"></textarea>
<div id="render"> </div>

<script>

$(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>

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.

Simon Adcock
  • 3,554
  • 3
  • 25
  • 41
  • That's quite neat, but what I'm trying to is not to color one type of charscter. I need to be able to tell the textbox to color for instance the 5th character. So just one character, and not dependant on what that character is. Do you think it would be possible to tweak your code to do this? – mort Mar 01 '13 at 18:21
  • Should probably have specified this a while ago, but what I'm doing is simply to show what character is currently being read while stepping through the program, as help for debugging :b Thanks a ton for your help. I'll try to see if I get it working. If I do get it working, I'll make sure to credit you :) – mort Mar 01 '13 at 18:34
  • Wow that sounds like a great project! I can see how you could modify the code to make it work, but either way it'll be a great JQuery learning experience :) Thanks very much for the potential credit, and good luck! – Simon Adcock Mar 01 '13 at 18:40
0

Although it seems impossible to do this, but one trick which i can think of is to use multiple span for every character and giving them a background color as per your choice.

With javascript, you can then access any character with the child selectors.

Mukul Kapoor
  • 185
  • 1
  • 2
  • 12