Basically, I have a user input field where a user can enter a number. They would like to also be able to enter equations in the input field as well.

Something like "874.45 * 0.825 + 4000" and have that converted to its real numeric value.

All the solutions I found point to the dreaded eval() method. Especially with this being a user entered field, I'm concerned about just running eval("874.45 * 0.825 + 4000") and hoping to get a number out the back end.

I suppose I could do a web service call back to the server (ASP.NET), but I'm afraid a slight delay will create some frustration from the user.

Does anyone know of either a good technique or existing libraries?

Basically, I have a user input field where a user can enter a number. They would like to also be able to enter equations in the input field as well.

Something like "874.45 * 0.825 + 4000" and have that converted to its real numeric value.

All the solutions I found point to the dreaded eval() method. Especially with this being a user entered field, I'm concerned about just running eval("874.45 * 0.825 + 4000") and hoping to get a number out the back end.

I suppose I could do a web service call back to the server (ASP.NET), but I'm afraid a slight delay will create some frustration from the user.

Does anyone know of either a good technique or existing libraries?

• javascript
• jquery
• client-side

• 2 Take a look here: stackoverflow./questions/5066824/… – Lazarus Commented May 19, 2011 at 15:52

4 Answers 4

What you really need here is an "expression parser", because you're trying to allow users to express their values using a small domain-specific language.

The basic mechanics work like this:

1. Tokenize their expression into operators and operands.

2. Based on the order of operations (e.g, where multiplication is evaluated with higher priority than addition), push the operators and operands onto a stack.

3. Pop the operands from the stack and push intermediate results back onto the stack. Repeat until the stack is empty.

I've done this a gazillion times for different "little languages" throughout my projects. But never in javascript. So I can't directly remend a suitable parsing library.

But a quick googling reveals "PEG.js". Check it out here:

http://pegjs.majda.cz/

All of the examples in their documentation are for exactly the kind of "expression parser" you're trying to build.

Simply multiply it by 1 and it will force javascript to treat it as an integer from then on.

Eg

int = '2343.34' * 1;
int = input * 1;

And what is so wrong about the eval in this case?

As for me it perfectly fits in your task. If you want to shield its execution context then you can define function like:

function calc(str) {
  var window = null, self = null, document = null;
  // other globals like: $ = null, jQuery = null, etc. 
  try { return eval(str); } catch(e) {...}
}

and use it where you need to interpret the string. Simple and effective.

I think eval can pose a lesser security risk if you parse the resulting string and validate its content to be only digits and operators and execute the evaluation by faking the outer scope variables like document etc as 'var document = null'.