时间戳

首页 > 解决方案 > 为什么 JavaScript RegExp 在 Firefox 中不起作用？

javascript - 为什么 JavaScript RegExp 在 Firefox 中不起作用？

问题描述

有人能告诉我为什么我的代码不能在 Firefox 中运行吗？在其他浏览器中没问题，但如果我在 Cash at Bank 单元格中输入 1000，它会将其标记为不正确的答案（以红色突出显示并显示不正确的反馈）。其他单元格条目的其他验证/测试也不起作用。

function checkAnswers() {
  document.querySelectorAll('[data-answer]').forEach(item => {
    if (RegExp(item.dataset.answer).test(item.innerText)) {
      item.style.backgroundColor = "#e2edde";
      item.title = item.dataset.correct;
    } else {
      item.style.backgroundColor = "#fce9e9";
      item.title = item.dataset.incorrect;
    }
  })
  document.getElementById("feedbackdiv").style.display = "inline-block";
  document.getElementById("feedback").innerText = "Click in each highlighted cell for more information.";
  document.getElementById("feedbackdiv").style.backgroundColor = "rgb(234, 243, 250)";
  document.getElementById("checkbutton").style.display = "none";
  document.getElementById("retrybutton").style.display = "block";

}

function showFeedback() {
  var cell = document.activeElement;
  if (cell.style.backgroundColor == "rgb(226, 237, 222)") {
    document.getElementById("feedback").innerText = cell.dataset.correct;
    document.getElementById("feedbackdiv").style.backgroundColor = "rgb(226, 237, 222)";
  }
  if (cell.style.backgroundColor == "rgb(252, 233, 233)") {
    document.getElementById("feedback").innerText = cell.dataset.incorrect;
    document.getElementById("feedbackdiv").style.backgroundColor = "rgb(252, 233, 233)";
  }

}

function showSolution() {
  document.querySelectorAll('[data-answer]').forEach(item => {
    item.style.backgroundColor = "#eaf3fa";
    item.innerText = item.dataset.solution;
  })
  document.getElementById("feedbackdiv").style.display = "inline-block";
  document.getElementById("feedback").innerText = "In the answer you can see that Cash at bank has increased by CU1,000 and equity has increased by CU1,000.";  document.getElementById("feedbackdiv").style.backgroundColor = "rgb(234, 243, 250)";  document.getElementById("checkbutton").style.display = "none";
  document.getElementById("solution").style.display = "none";  document.getElementById("retrybutton").style.display = "block";
}
<table border="1">
  <tbody>
    <tr>
      <th scope="col">&nbsp;</th>
      <th scope="col">Cash at <br> Bank </th>
      <th scope="col">Vehicle</th>
      <th scope="col">Equipment</th>
      <th scope="col">Supplies</th>
      <th scope="col">Accounts <br> Receivable </th>
      <th scope="col">&nbsp;</th>
      <th scope="col">Accounts <br> Payable </th>
      <th scope="col">&nbsp;</th>
      <th scope="col">Otok, Equity </th>
    </tr>
    <tr>
      <td>(6)</td>
      <td id="cashanswer" title="Click in a cell to type your entry" contenteditable="true" data-answer="^(1000|1\,000)$" data-solution="1,000" data-incorrect="Incorrect. We neeed to show that Cash at Bank has increased by CU1,000." data-correct="Well done. Cash at Bank has increased by CU1,000."
        onfocus="showFeedback()"></td>
      <td id="vehicleanswer" title="Click in a cell to type your entry" contenteditable="true" data-answer="^$" data-incorrect="Incorrect. This cell should be left blank." data-correct="Well done. This cell should be left blank." onfocus="showFeedback()"></td>
      <td id="equipmentanswer" title="Click in a cell to type your entry" contenteditable="true" data-answer="^$" data-incorrect="Incorrect. This cell should be left blank." data-correct="Well done. This cell should be left blank." onfocus="showFeedback()"></td>
      <td id="suppliesanswer" title="Click in a cell to type your entry" contenteditable="true" data-answer="^$" data-incorrect="Incorrect. This cell should be left blank." data-correct="Well done. This cell should be left blank." onfocus="showFeedback()"></td>
      <td id="receivableanswer" title="Click in a cell to type your entry" contenteditable="true" data-answer="^$" data-incorrect="Incorrect. This cell should be left blank." data-correct="Well done. This cell should be left blank." onfocus="showFeedback()"></td>
      <td></td>
      <td id="payableanswer" title="Click in a cell to type your entry" contenteditable="true" data-answer="^$" data-incorrect="Incorrect. This cell should be left blank." data-correct="Well done. This cell should be left blank." onfocus="showFeedback()"></td>
      <td></td>
      <td id="equityanswer" title="Click in a cell to type your entry" contenteditable="true" data-answer="^(1000|1\,000)$" data-solution="1,000" data-incorrect="Incorrect. We neeed to show that Equity has increased by CU1,000." data-correct="Well done. Equity has increased by CU1,000."
        onfocus="showFeedback()"></td>
    </tr>
  </tbody>
</table>

<div id="feedbackdiv" style="clear: both; padding-left: 15px; padding-right: 15px; display: none; margin-top: 20px;">
  <p id="feedback" style="margin-top: 15px;">&nbsp;</p>
</div>
<p style="margin-top: 20px;">
  <button class="btn btn-secondary" id="checkbutton" onclick="checkAnswers()">Check answers</button>
</p>
<p id="retrybutton" style="display: none">
  <button onclick="window.location.reload();" class="btn btn-secondary">Retry</button>
</p>
<p id="solution" style="margin-top: 20px;">
  <button class="btn btn-secondary" id="solutionbutton" onclick="showSolution()">Show solution</button>
</p>

标签： javascriptregex

解决方案

Firefox 回馈“1000\n”，Chrome 回馈“1000”，因此将多行的“m”添加到您的正则表达式帐户中

document.querySelectorAll('[data-answer]').forEach(item => {
    if (RegExp(item.dataset.answer, 'm').test(item.innerText)) {
        item.style.backgroundColor = "#e2edde";
        item.title = item.dataset.correct;
    } else {
        item.style.backgroundColor = "#fce9e9";
        item.title = item.dataset.incorrect;
    }
})

推荐阅读