如何通过在输入文本字段中键入元素来验证元素的存在？

Question

当用户可以输入字母（元素1 = A，元素2 =B。元素27 = AA）时，我在输入字段中使用的不同元素上具有不同的ID。

如何在输入中正确扫描这些元素以确定元素是否存在以及是否将其放入将这些ID转换为稍后计算的值的字符串中？

我在计算器上有一个id系统，用户可以在其中生成可以计算的不同元素（滑块，单选按钮，复选框）。它们都有一个数字ID，该ID会以递进顺序转换为字母字符（元素1 = A，元素2 =B。元素27 = AA）。稍后我有一个输入字段，用户可以在其中创建自己的公式，该公式将被计算并放入结果选项卡中。

示例公式：A + B * 2

我翻译为字母的原因是，以便用户可以在创建公式时使用数字。我已经成功地使id的工作成为一个字母，但是id刚开始击中AA和AB却不起作用，因为当前我将其拆分成一个数组并扫描每个元素的值，这对于两个对象来说都是成问题的字母，因为它们分为两个不同的ID。

我曾尝试根据运算符（+，-，*，/）拆分数组，但这会将它们从数组中删除。

function resultCalcInit(resultObject, resultFormulaObject) {
  $('.createWrap').on('keyup input change', $(resultFormulaObject).find('.jvformbuilder-formula-panel-elements-result-field-formula'), function(e) {
    var thisKey = new RegExp(String.fromCharCode(e.which).toLowerCase());
    var keyNoRegEx = String.fromCharCode(e.which).toLowerCase();
    var counter = 0;
    var letters = /^[0-9a-zA-Z]+$/;
    for (var call of $('.dropzone').find('.builder-elements')) {
      if ($(call).find('.bf-number')[0]) {
        var operators = ['»', '½', '/', '¿'];
        if (String.fromCharCode(e.which) == $(call).find('.bf-number').attr("data-calcId").toUpperCase() || $.isNumeric(String.fromCharCode(e.which)) || wordInString(String.fromCharCode(e.which), operators)) {
          counter++;
        } else {}
      } else if ($(call).find('.builder-list')[0]) {
        var operators = ['»', '½', '/', '¿'];
        if (String.fromCharCode(e.which) == $(call).find('.builder-list').attr("data-calcId").toUpperCase() || $.isNumeric(String.fromCharCode(e.which)) || wordInString(String.fromCharCode(e.which), operators)) {
          counter++;
        } else {}
      } else if ($(call).find('.builder-radio')[0]) {
        var operators = ['»', '½', '/', '¿'];
        if (String.fromCharCode(e.which) == $(call).find('.builder-radio').attr("data-calcId").toUpperCase() || $.isNumeric(String.fromCharCode(e.which)) || wordInString(String.fromCharCode(e.which), operators)) {
          counter++;
        } else {}
      } else if ($(call).find('.builderSlider')[0]) {
        var operators = ['»', '½', '/', '¿'];
        if (String.fromCharCode(e.which) == $(call).find('.builderSlider').attr("data-calcId").toUpperCase() || $.isNumeric(String.fromCharCode(e.which)) || wordInString(String.fromCharCode(e.which), operators)) {
          counter++;
        } else {}
      } else if ($(call).find('.builder-checkboxes')[0]) {
        var operators = ['»', '½', '/', '¿'];
        if (String.fromCharCode(e.which) == $(call).find('.builder-checkboxes').attr("data-calcId").toUpperCase() || $.isNumeric(String.fromCharCode(e.which)) || wordInString(String.fromCharCode(e.which), operators)) {
          counter++;
        } else {}
      }
    }
    if (String.fromCharCode(e.which).match(letters) && counter < 1) {
      $(resultFormulaObject).find('.jvformbuilder-formula-panel-elements-result-field-formula').html($(resultFormulaObject).find('.jvformbuilder-formula-panel-elements-result-field-formula').html().replace(thisKey, ""));
      var returnString = $(resultFormulaObject).find('.jvformbuilder-formula-panel-elements-result-field-formula').text();
      $('#jvformbuilder-formula-panel').find('.jvformbuilder-formula-panel-elements').each(function() {
        var formulaResultId = $(this).find('.jvformbuilder-formula-panel-elements-result-field-formula');
        $('.builder-elements').each(function() {
          if (formulaResultId.attr("id") == $(this).find('.result-number').attr("id")) {
            var resultWindow = $(this).find('.result-number');
            var formula = returnString.slice(1);
          }
        });
      });
    } else {
      resultCalc(resultFormulaObject);
    }
  });
}

在此检查键入的字母是否为现有ID。如果不是，则将其删除。如果是，它将停留并继续扫描该值。

function resultCalc(resultFormulaObject) {
  var returnString = $(resultFormulaObject).find('.jvformbuilder-formula-panel-elements-result-field-formula').text();
  $('#jvformbuilder-formula-panel').find('.jvformbuilder-formula-panel-elements').each(function() {
    var formulaResultId = $(this).find('.jvformbuilder-formula-panel-elements-result-field-formula');
    $('.builder-elements').each(function() {
      if (formulaResultId.attr("id") == $(this).find('.result-number').attr("id")) {
        var resultWindow = $(this).find('.result-number');
        var formula = returnString.slice(1).split("");
        var formulaNbr = returnString.slice(1).split("");
        var alphabet = ("abcdefghijklmnopqrstuvwxyz").split("");
        var calculationArray = returnString.slice(1).split("");
        var tempArr = formula;
        for (var i = 0; i < formula.length; i++) {
          $('.builder-elements').each(function() {
            if ($(this).find('.builder-list').attr("data-calcid") == formula[i]) {
              formulaNbr[i] = $(this).find('.builder-list').children("option:selected").val();
              calculationArray[i] = "parseInt(ID" + alphabet.indexOf(formula[i]) + ").value)";
            } else if ($(this).find('.builder-field').attr("data-calcid") == formula[i]) {
              if ($(this).find('.bf-text')[0]) {
                console.log(tempArr);
                if (tempArr.indexOf(tempArr[i]) == 0) {
                  tempArr.splice(i, 2);
                  calculationArray.splice(i, 2);
                } else {
                  tempArr.splice(i - 1, 2);
                  calculationArray.splice(i - 1, 2);
                }
                var formulaString = "";
                for (var j = 0; j < formula.length; j++) {
                  formulaString += tempArr[j];
                }
                formulaResultId.empty();
                formulaResultId.html("=" + formulaString);
              } else if ($(this).find('.bf-telNum')[0]) {
                if (tempArr.indexOf(tempArr[i]) == 0) {
                  tempArr.splice(i, 2);
                  calculationArray.splice(i, 2);
                } else {
                  tempArr.splice(i - 1, 2);
                  calculationArray.splice(i - 1, 2);
                }
                var formulaString = "";
                for (var j = 0; j < formula.length; j++) {
                  formulaString += tempArr[j];
                }
                formulaResultId.empty();
                formulaResultId.html("=" + formulaString);
              } else if ($(this).find('.bf-date')[0]) {
                if (tempArr.indexOf(tempArr[i]) == 0) {
                  tempArr.splice(i, 2);
                  calculationArray.splice(i, 2);
                } else {
                  tempArr.splice(i - 1, 2);
                  calculationArray.splice(i - 1, 2);
                }
                var formulaString = "";
                for (var j = 0; j < formula.length; j++) {
                  formulaString += tempArr[j];
                }
                formulaResultId.empty();
                formulaResultId.html("=" + formulaString);
              } else if ($(this).find('.bf-number')[0]) {
                if (!$(this).find('.bf-number').val()) {
                  formulaNbr[i] = 0;
                } else {
                  formulaNbr[i] = $(this).find('.bf-number').val();
                }
                calculationArray[i] = "parseInt(ID" + alphabet.indexOf(formula[i]) + ").value)";
              }
            } else if ($(this).find('.builder-textarea').attr("data-calcid") == formula[i]) {
              if (tempArr.indexOf(tempArr[i]) == 0) {
                tempArr.splice(i, 2);
                calculationArray.splice(i, 2);
              } else {
                tempArr.splice(i - 1, 2);
                calculationArray.splice(i - 1, 2);
              }
              var formulaString = "";
              for (var j = 0; j < formula.length; j++) {
                formulaString += tempArr[j];
              }
              formulaResultId.empty();
              formulaResultId.html("=" + formulaString);
            } else if ($(this).find('.builder-radio').attr("data-calcid") == formula[i]) {
              var resultRadio = [];
              $(this).find('.builder-radio-input').each(function(i) {
                resultRadio[i] = parseInt($(this).val());
              });
              var sum = resultRadio.reduce(add);
              formulaNbr[i] = sum;
              calculationArray[i] = "parseInt(ID" + alphabet.indexOf(formula[i]) + ").value)";
            } else if ($(this).find('.builder-checkboxes').attr("data-calcid") == formula[i]) {
              var resultCheck = [];
              $(this).find('.builderCB').each(function(i) {
                resultCheck[i] = parseInt($(this).val());
              });
              var sum = resultCheck.reduce(add);
              formulaNbr[i] = sum;
              calculationArray[i] = "parseInt(ID" + alphabet.indexOf(formula[i]) + ").value)";
            } else if ($(this).find('.builderSlider').attr("data-calcid") == formula[i]) {
              formulaNbr[i] = $(this).find('.builder-slider').val();
              calculationArray[i] = "parseInt(ID" + alphabet.indexOf(formula[i]) + ").value)";
            }
          });
        }
        var calculationString = "";
        for (var i = 0; i < calculationArray.length; i++) {
          calculationString += calculationArray[i];
        }
        returnString = "";
        for (var i = 0; i < formulaNbr.length; i++) {
          returnString += formulaNbr[i];
        }
        if (returnString) {
          printRes(returnString, resultWindow, calculationString);
        }
      }
    });
  });
}

此处，它从与公式标签内编写的ID相关的不同对象获取不同的值。稍后将其打印到结果选项卡中。

function printRes(resString, resArea, calcString) {
  resArea.empty();
  var result = eval(resString);
  if (!result) {
    resArea.append(0)
    resArea.attr("data-calcForm", "");
  } else {
    resArea.append(result)
    resArea.attr("data-calcForm", calcString);
  }
}

如果id变为两倍，它将完全崩溃。那是我需要你们帮助我的地方。我该如何扫描双字符ID，单字符，三字符以及用户决定生成多少个字符。

Answer 1

无法从已发布的大代码集中重现您遇到的问题。而且我不得不承认，您尝试达到的目标对我来说还不清楚。

但是真正清楚的是，您需要将公式的元素与运算符分开。您可以使用2个正则表达式来实现。我看到您已经使用了第一个：/[0-9a-zA-Z]+/，但我不知道您如何使用它...

无论如何，这是一个真正的简单演示，展示了您可以有两个数组，一个数组用于公式的元素，另一个数组用于运算符。一旦有了它，就应该可以使用它来做任何您想做的事情。

$("button").on("click",function(){
  
  // The input value
  var input_val = $("input").val();
  
  // Regexes
  var elements_regex = /[0-9a-zA-Z]+/g;
  var operators_regex = /[\+\-*\/]/g;
  
  // Create the arrays
  var elements_array = input_val.match(elements_regex);  
  var operators_array = input_val.match(operators_regex);
  
  // Needed just for this demo
  var regex_validation = $(".regex_validation");
  var elements = $(".elements");
  var operators = $(".operators");
  
  // RESULTS
  // Regex validation
  for(i=0;i<elements_array.length;i++){
    // Element
    if(typeof(elements_array[i])!="undefined"){
      regex_validation.append("<span class='element'>"+elements_array[i]+"<span>");
    }
    // Operator
    if(typeof(operators_array[i])!="undefined"){
      regex_validation.append("<span class='operator'>"+operators_array[i]+"<span>");
    }
  }
  
  // Elements
  elements.html(JSON.stringify(elements_array));
  // Operators
  operators.html(JSON.stringify(operators_array));
});

.result{
  height: 50px;
  width: 500px;
  border: 1px solid black;
}
.element{
  background: cyan;
}
.operator{
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Enter your formula: <input value="AA+B*2"><button type="button">Check</button><br>
<br>
Regex validation: (cyan for elements, yellow for operators)
<div class="result regex_validation"></div>
<br>
Elements array:
<div class="result elements"></div>
<br>
Operators array:
<div class="result operators"></div>
<br>

CodePen