Safari中JavaScript条件判断真值误判为假值问题求助

问题背景 #

我开发了一款测验应用，通过以下代码检测用户选中的答案是否正确：

// Gets the correct answer for the question
const correct = quiz.correct[x]

for(check of checkboxes){ // all checkbox inputs user can choose from
    if(check.checked === true){ // can only choose a single checkbox
        const ans = check.nextElementSibling.innerText.substring(3) // The answer from the selected checkbox
        console.log(ans + ' ' + typeof ans) // Confirming the selected answer is right
        console.log(correct + ' ' + typeof correct) // Confirming the correct answer for the question is right
        if(correct === ans){ // Does not work on Safari...
            console.log('true')
        }else{
            console.log('false')
        }
    }
}

Chrome中这段代码正常工作，但在Safari里，明明控制台显示correct和ans的内容、类型完全一致，correct === ans却始终返回false，目标用户多使用Safari，急需解决这个兼容问题。

问题原因 #

核心原因是Safari与Chrome对innerText的文本处理逻辑存在差异：

• Safari会保留元素文本中的不可见字符（比如换行符、零宽空格、全角空格），或是对换行、空格的处理方式和Chrome不一致；
• 这些字符肉眼无法识别，但会导致两个看起来完全一样的字符串，实际编码存在差异，最终全等判断失败。

解决方案 #

方案1：标准化字符串（推荐） #

封装一个字符串清理函数，统一处理空白字符和不可见字符，消除浏览器差异：

// 清理字符串：去除首尾空白、合并连续空白、过滤不可见字符
function cleanString(str) {
  return str.trim()
            .replace(/\s+/g, ' ')
            .replace(/[\u200B-\u200D\uFEFF]/g, '');
}

// 替换原判断逻辑
if(cleanString(correct) === cleanString(ans)) {
    console.log('true');
} else {
    console.log('false');
}

方案2：避免依赖innerText #

给选项元素添加自定义data-answer属性，直接读取属性值，绕过文本处理差异：

<!-- 修改HTML，给选项文本添加data属性 -->
<input type="checkbox" />
<span data-answer="正确答案内容">A. 正确答案内容</span>

// JS中直接读取data属性值
const ans = check.nextElementSibling.dataset.answer;
// 此时直接用correct === ans判断即可

方案3：排查差异字符（调试用） #

如果想明确是哪个字符导致的问题，可以把字符串转成字符编码数组对比：

// 打印每个字符的Unicode编码
console.log('correct编码:', [...correct].map(c => c.charCodeAt(0)));
console.log('ans编码:', [...ans].map(c => c.charCodeAt(0)));

对比两个数组的差异，就能定位到导致判断失败的具体字符。

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