Question

我正在创建'类似Windows'的计算器。我已经在 html 中构建了我的计算器，并将输入设置为只读，类似于Windows'。现在，我知道你可以通过创建正确的正则表达式来控制基本输入，但是只读它的情况呢？

我想要的是通过添加事件监听器而不是更新输入来控制输入框中的内容如果条件已经满足我已经做过但我可以通过使用正则表达式或其他一些技术来进一步限制我的代码，例如 3.55 *（4 /（1 + 1））？我希望我能清楚自己需要什么。

我尝试设置无数变量并使用if / switch语句控制它们最终工作，但它花了我大约100行代码很快成为控制的噩梦，所以我从头开始寻找替代品，如果我对JS的了解是真的，那就有可能。请只有纯JS和其他库。这是我目前的JS代码：

const domRef = {
  inputMain: document.getElementById('input-main'),
  inputSecondary: document.getElementById('input-secondary'),
  buttons: document.getElementById('calculator-basic').querySelectorAll('button')
}

function handleClick(event) {
  let target = event.target;

  if (target.classList.contains('expressions')) { // operands and operators
    let input = target.textContent;
    updateInputMain(input);
  }

}

function handleKeypress(event) {
  let target;
  for (let i = 0; i < domRef.buttons.length; i++) {

    if (domRef.buttons[i].textContent === event.key) {
      target = domRef.buttons[i];
      target.click();
    }

  }
}

function updateInputMain(input) {
  domRef.inputMain.value += input;
}



for (let i = 0; i < domRef.buttons.length; i++) {
  domRef.buttons[i].addEventListener('click', handleClick);
}

document.body.addEventListener('keypress', handleKeypress);

Answer 1

我建议使用专门的库，例如Math.js

进行强大的计算变得如此简单：

math.sqrt(-4); // 2i
console.log(math.eval(3.55*(4/(1+1))));

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.4.2/math.min.js"></script>

Math.js包含一个函数math.parse，用于将表达式解析为表达式树。这应该很方便。

此外，我们可以使用try-catch块包装解析或eval来检查语法错误：

try {
  math.parse('3.55*(4/(1+1)');
}
catch(error) {
  console.error(error);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.4.2/math.min.js"></script>

Javascript：正则表达式或其他一些控制只读输入的技术

1 个答案: