Firefox中JavaScript正则表达式验证失效问题技术求助

我一眼就看出问题出在跨浏览器的文本处理差异上，Firefox对innerText的处理和Chrome等浏览器不一样，导致你的正则匹配失效了。

核心原因 #

在Chrome/Edge这类浏览器中，当你在contenteditable单元格输入内容后，innerText会自动忽略末尾的换行符；但Firefox会保留这个换行（相当于你输入完内容后按了回车）。你的正则^(1000|1\,000)$要求完全精确匹配，所以如果单元格的实际文本是"1000\n"（带换行），自然匹配失败，被标红报错。

另外，showFeedback里直接比较style.backgroundColor也有隐患——不同浏览器返回的颜色格式可能不一致（比如Firefox可能返回十六进制，而Chrome返回rgb值），这也会导致反馈功能异常。

修复方案 #

1. 统一文本获取方式，去除多余空白 #

把所有用到innerText的地方换成textContent.trim()，这样会自动去除文本首尾的空格、换行等空白字符，确保跨浏览器的匹配一致性。

修改后的checkAnswers函数：

function checkAnswers() { 
  document.querySelectorAll('[data-answer]').forEach(item => { 
    // 用textContent.trim()替代innerText，消除空白干扰
    const inputText = item.textContent.trim();
    if (RegExp(item.dataset.answer).test(inputText)) { 
      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"; 
}

2. 优化反馈判断逻辑（可选但更健壮） #

不要直接比较style.backgroundColor，改用CSS类来标记状态，这样更可靠：

首先添加CSS样式：

.correct-cell { background-color: #e2edde; }
.incorrect-cell { background-color: #fce9e9; }

然后修改checkAnswers里的样式设置：

// 正确状态
item.classList.add('correct-cell');
item.classList.remove('incorrect-cell');
// 错误状态
item.classList.add('incorrect-cell');
item.classList.remove('correct-cell');

最后修改showFeedback函数：

function showFeedback() { 
  const cell = document.activeElement; 
  const feedbackDiv = document.getElementById("feedbackdiv");
  const feedbackText = document.getElementById("feedback");
  
  if (cell.classList.contains('correct-cell')) { 
    feedbackText.innerText = cell.dataset.correct; 
    feedbackDiv.style.backgroundColor = "#e2edde"; 
  } else if (cell.classList.contains('incorrect-cell')) { 
    feedbackText.innerText = cell.dataset.incorrect; 
    feedbackDiv.style.backgroundColor = "#fce9e9"; 
  }
}

这样修改后，不仅能解决Firefox的问题，整个代码的跨浏览器兼容性也会更好。

内容的提问来源于stack exchange，提问作者novice