在单个字段Jquery中计算表达式

Question

我正在开发一个HTML + JQuery计算器，我有基本的操作，但我需要实现以下内容：

Obs：我不能使用eval（）

当用户在输入字段中键入表达式类型：（5 * 5）+4 JQuery必须使用此值来执行操作并显示结果。你知道怎么做这个吗？

$("input[name=exp]").click(function(){
    valor = $("#result").val();
    $("#result").val(valor);
});

遵循我的JQuery代码：

$( function(){

    var v1, v2, op;

    $("input[name=btn]").click(function(){
        $("#result").val($("#result").val() + $(this).val());
    });

    $("input[name=ce]").click(function(){
        $("#result").val('');
        $("#op").text('');
    });

    $("input[name=soma]").click(function(){
        if($("#result").val() != ''){
            v1 = parseFloat($("#result").val());
            $("#result").val('');
            op = "soma";
            $("#op").text($(this).val());
        }else{
            alert("Insira um valor para efetuar a operação");
        }
    });

    $("input[name=menos]").click(function(){
        if($("#result").val() != ''){
            v1 = parseFloat($("#result").val());
            $("#result").val('');
            op = "menos";
            $("#op").text($(this).val());
        }else{
            alert("Insira um valor para efetuar a operação");
        }
    });

    $("input[name=vezes]").click(function(){
        if($("#result").val() != ''){
            v1 = parseFloat($("#result").val());
            $("#result").val('');
            op = "vezes";
            $("#op").text($(this).val());
        }else{
            alert("Insira um valor para efetuar a operação");
        }
    });

    $("input[name=divisao]").click(function(){
        if($("#result").val() != ''){
            v1 = parseFloat($("#result").val());
            $("#result").val('');
            op = "divisao";
            $("#op").text($(this).val());
        }else{
            alert("Insira um valor para efetuar a operação");
        }
    });

    $("input[name=igual]").click(function(){
        if($("#result").val() != ''){
            v2 = parseFloat($("#result").val());

            if(op == "soma"){
                $("#result").val(v1 + v2);
            }else if(op == "menos"){
                $("#result").val(v1 - v2);
            }else if(op == "vezes"){
                $("#result").val(v1 * v2);
            }else{
                $("#result").val(v1 / v2);
            }
        }else{
            alert("Insira um valor para efetuar a operação");
        }
    });

    $("input[name=apagar").click(function(){
        var len = $("#result").val().length;

        var valor = $("#result").val();
        valor = valor.replace(valor.charAt(len - 1), "");
        $("#result").val(valor);
    });    
});    

Answer 1

您可以修改文本，尝试添加+ 5。在您键入有效表达式之前，它将返回NaN。它有一个内置的词法分析器和解析器。 Lexers负责接收字符串输入并将其分解为令牌。解析器执行令牌。

例如，当lexing (5 * 5) + 6 + 6时，我们从词法分子得到以下内容：

[
  [
    "5",
    "*",
    "5"
  ],
  "+",
  "6",
  "+",
  "6"
]

然后我们的解析器将处理每个嵌套表达式（并将字符串转换为浮点数），直到我们最终得到我们的答案37。

稍微注意，这不遵循所写的操作顺序。它从左到右解析。如果你需要操作的顺序，只需评论，我会看到我能做什么。

$("#instantCalc").on('input',function () {
  var strExp = $(this).val();
  var lexing = lexer(strExp);
  var parsing = parser(lexing);
  console.log(parsing);
}).trigger('input');

function lexer(strExp) {
  var inception = 0,
      fullExp = [],
      operators = "+-*/",
      temp = "";
  for (var i = 0, len = strExp.length; i < len; i++) {
    if (strExp[i] == "(") {
      inception++;
    } else if (strExp[i] === ")") {
      inception--;
      if (inception === 0) {
        fullExp.push(lexer(temp));
        temp = "";
      }
    } else if (inception === 0 && operators.indexOf(strExp[i]) != -1) {
      if (temp.trim().length) {
        fullExp.push(temp.trim());
      }
      temp = "";
      fullExp.push(strExp[i]);
    } else {
      temp += strExp[i];
    }
  }
  if (temp.trim().length) {
    fullExp.push(temp.trim());
  }
  return fullExp;
}

function parser(lexed) {
  var expressions = {
    "+" : (a,b) => a+b,
    "-" : (a,b) => a-b,
    "/" : (a,b) => a/b,
    "*" : (a,b) => a*b,  
  }
  for (var i = 0, len = lexed.length; i < len; i++) {
    if (Array.isArray(lexed[i])) {
      lexed[i] = parser(lexed[i])
    }
  }
  while (lexed.length-1) {
    var first = lexed.shift();
    lexed.unshift(expressions[lexed.shift()](parseFloat(first),parseFloat(lexed.shift())));
  }
  return lexed[0];
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="instantCalc" value="(5*5) + 6 + 6" />
<input id="output" disabled/>