-4

I am creating a sort of compiler, When you type something like if or else on a textbox then it changes to a color like red automatically. I only need this to create a simple compiler using javascript

codeL
  • 1
  • 1
  • 1
    You had better get started then... – NewToJS Apr 04 '17 at 16:55
  • Possible duplicate of [Textarea that can do syntax highlighting on the fly?](http://stackoverflow.com/questions/1619167/textarea-that-can-do-syntax-highlighting-on-the-fly) – JJJ Apr 04 '17 at 16:56

2 Answers2

0

You need an element (not an input element) where you attach a keystroke listener. You collect the characters you recieve into a token map.

When you done generating your AST. Use that to create HTML elements with class names to match their token class (eg. assignment, variable, string)

Now use CSS to attach styles like:

.variable-name {font-style: italic, color: #838383}
.string {color: green}
.operator {color: red}
AP.
  • 8,082
  • 2
  • 24
  • 33
-1

You probably need to have some regular expressions for this. So for example you look for match for if statement: (simple example)

text.match(/(if)/g);

and then you can just apply a class to that: 

text.classList.add('red');

The regex can get pretty complicated when dealing with all the possibilities in the code with parenthesis and brackets like in nested expressions, the regex would be pretty intense, so good luck. I am sure there is a better solution than this.

StefanBob
  • 4,857
  • 2
  • 32
  • 38