JQuery ExpressionBuilder

ExpressionBuilder is UI component to create a input for arithmetic expressions with functiuons and intellisense

Features

Support common mathematic operators, variables (or properties), strings and functions
Expression validation and parser
Responsive Bootstrap theme

Expressions samples

Arithmetic expressions

23 + 12
(12 / 2) + 4
(150 * (25 - 5)) / (-5 * -6)

Advanced expressions

10 - var1
(grade * 100) / average
Add(10, 15) / Sub(10, 5)
Substring("Hello World!", 6)

Include the Javascript and Stylesheet files in the head of your page as following:

  <!--Head contents-->
  <link rel="stylesheet" href="https://exp.js.org/src/expression-builder.css" />

  <!--<script src="jquery.js"></script>-->
  <script src="https://exp.js.org/src/expression-builder-v2.js"></script>

Basic use

The fundamental use of the ExpressionBuilder could be just enabling a validation on the user input. fisrt we need to have a input:

  <input type="text" id="txt" />

To setup the besic functionality, use the following javascript code:

  let expBuilder = $('#txt').expressionBuilder();

  //validate the expression
  let isExpressionValid = expBuilder.isValid();

  //get expression
  let exp = expBuilder.getExpression();

See the besic demo here

Options

Name	Type	Default	Description
variables	object[]		Array of available variables to suggest while user is typing in the expression. See below
expression	string	''	Initial expression to be set into the input while generating the expression builder
preventWrongInput	boolean	false	Helps the user to input the expression easily by preventing to input wrong caracters (limits some correct expressions to input)
functions	object	{}	A json object with desired fuctions to support in the expression. See below
suggestions	'up'\|'down'	'down'	Suggestion position when the user is searching a variable or function

Variables

Property	Type	Description
variableId	number\|string	It will be replace with the variable name in a bracket liek `[32]`, to avoid any error make sure to have a unique id for each variable
name	string	Searchable variable name
value	any	To compute the expression and get the result you can pass value to each variable

ExpressionBuilder will suggest the available variables while the user is typing part of the variable name and will replace the variable Id in a bracket as the result. See the following example:

  var options = {
    varaibles: [
      {
        variableId: 1,
        name: 'FirstName'
      },
      {
        variableId: 2,
        name: 'Age'
      }
    ]
  };
  var expBuilder = $('#txt').expressionBuilder(options);

  //input: Age + 3
  var expResult = expBuilder.getExpression();

  //expResult: [2]+3

If the varaiable name starts with a digit expressionBuilder will wrap it in brackets or user should type it in brackets like: [1_name] + " " + LastName

See the varaible demo here

Functions

This is a flexible object you can add to expressionBuidler to support as part of the expression. Not only it will suggest it while user is typing a part of the function name, but also it shows the function signature to help user to avoid wrong syntaxes. Also, expresssionBuilder will use the same function when you run the expression.

In the following example we define to simple Add and Sub function to the expressionBuilder and you can see the runing example in the demo page.

  var options = {
    functions: {
      Add: function (x, y) {
        return x + y;
      },
      Sub: function (x, y) {
        return x - y;
      }
    }
  };
  var expBuilder = $('#txt').expressionBuilder(options);

  //valid input: Add(2, 3)