How can I interpret strings in textarea with JavaScript/jQuery?

问题

I am trying to make a small interpreting program with JavaScript/jQuery. So what I want is that when the user enter some text in the textarea the program should interpret that text and print the output in another text area. Till now I have achieved this:

https://jsfiddle.net/7462hbv1/

With this I am able to catch each of the string that the user inputs in the text area. But now I want that when the user for example enter:

number a =1
number b=2
number sum=0
sum =a +b
print sum

the program should interpret this and the output should be 3 in this case. Can anyone give me any idea how can I do this? I am thinking of building a two dimensional array and save there each row (for each row to have type, name, value) and then make calculation with this array. I would appreciate any help. Thank you in advance

UPDATE

I have worked with my example and specifically with print statement. I have made it to print multiple strings or varibles(connected with +) and to print error message if + is missing. I have two problems now:

1. I want to have a error message when try to print undefined variable and not output undefined like in this case( I want to have that messsage in the #errorstextarea):

   a = 240 b=120 print a + c the output is 240 undefined

2. I want to have the character \iri instead '\n' for the print statement to go to new line. I have done this with var result2= result1.replace('\iri','\n'); but it does not function.

Here is my demo(DEMO)

Can you please help me?

UPDATE

I solve the second problem. Here is the DEMO. Can you please help me with the first one?

回答1:

This is not how compilers / interpreters are written, but it should do for an easy language:

1. Define regular expressions for each statement (e.g. if you only allow to print variables /^print ([a-z]+)$/).

2. Match each line against the expressions and decide what to do (e.g. if you translate to javascript your print statement could become $('#output').append(variablename + '<br>'); and mathematical formulas don't need to be translated at all, just validated).

3. If everything is correct execute script. Possible problems: overwriting system variables or variables named like keywords (→ prefix your variables in the generated code or store them all in the same array / object), script injection (→ escape ' in your strings (\') and replace < and > with < and > and possibly other restrictions).

Here is a very simple example calculating the greatest common divisor:

https://jsfiddle.net/7462hbv1/6/

Some remarks:

1. It's a pretty stupid language but I think it is Turing complete.
2. There should be various checks (e.g. only the individual lines are checked, not if an if is correctly closed) and meaningful error messages.
3. Only one datatype is supported: integer
4. Variable names can have lower and upper case letters but nothing else

5. grammar (incomplete):

   <int> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
   <integer> ::= <int>[<int>*]
   <assignment> ::= <variable> = <formula>
   <value> ::= <integer> | <variable>
   <formula> ::= [<formulaPart>*] <value>
   <operator> ::= + | - | * | / | %
   <formulaPart> ::= <value> <operator>
   <while> ::= while <variable>
   <endWhile> ::= end while
   <comparator> ::= > | < | =
   <if> ::= if <variable> <comparator> <value>
   <else> ::= else
   <endIf> ::= end if
   <print> ::= print "<message>" [<variable>]
   

   Note that there are no brackets, you have to split the lines of code until your math needs no more brackets.

6. Here is how the (working!) GCD program looks like in this language:

   print "Euclidean algorithm"
   a = 240
   print "a = " a
   b = 360
   print "b = " b
   if a > 0
     while b
       if a > b
         a = a - b
       else
         b = b - a
       end if
     end while
     print "gcd: " a
   else
     print "gcd: " b
   end if
   

7. And this is the code actually executed:

   myProgram=function(){var variables=[];var pOut='';pOut+='Euclidean algorithm\n';variables['a']=240;pOut+='a = '+variables['a']+'\n';variables['b']=360;pOut+='b = '+variables['b']+'\n';if(variables['a']>0){while(variables['b']){if(variables['a']>variables['b']){variables['a']=variables['a']-variables['b'];}else{variables['b']=variables['b']-variables['a'];}}pOut+='gcd: '+variables['a']+'\n';}else{pOut+='gcd: '+variables['b']+'\n';}$('#output').html(pOut);};myProgram();
   

来源：https://stackoverflow.com/questions/29841884/how-can-i-interpret-strings-in-textarea-with-javascript-jquery