Why is JavaScript RegExp not working in Firefox?

Question

Could someone tell me why my code is not working in Firefox? It's fine in other browsers, but if I type in 1000 in the Cash at Bank cell, it's marking it as an incorrect answer (highlighting in red and displaying the incorrect feedback). The other validation / testing of other cell entries doesn't work either.

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>

Welcome to SO! This code crashes when I run it, so it's not a [mcve]. Please make the code run and be very specific about which regex is problematic. Strip out any code that isn't relevant to the problem so others can understand what you need. Thanks. — ggorlen, May 19 '20 at 15:26

score 3 · Accepted Answer · answered May 19 '20 at 15:39

3

Firefox gives back "1000\n" and Chrome gives back "1000" so adding 'm' for multiline to your regex accounts for that

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;
    }
})

answered May 19 '20 at 15:39

lusc

1,206
1
10
19

Thank you so much for your help! It does the trick with any cells where I'm asking for something to be typed in. However, I can't get it to work properly for the Vehicle column. To pass the test, the cell in the Vehicle column should be left blank. If I type something there, Firefox treats it as a correct answer (wrongly), even though other browser are interpreting it correctly - i.e. highlight that cell in red if it contains any content. I've tried to look for a solution, but I'm just learning JS and have no knowledge of RegExp so would be really grateful for any help. – novice May 20 '20 at 14:06
I'm not to good at regex myself but you could check [this solution](https://stackoverflow.com/questions/3012788/how-to-check-if-a-line-is-blank-using-regex#3012832) which did the trick when I tested it – lusc May 20 '20 at 17:35

Why is JavaScript RegExp not working in Firefox?

1 Answers1