JavaScript中字符串值比较及正确答案展示实现方案问询

嘿，作为JS新手想开发这款翻译验证工具真的很有意义！我来给你梳理下实现思路，一步步帮你搞定核心功能，包括重音容错的关键逻辑：

1. 先搭好基础HTML结构 #

咱先把页面的基本元素搞定，需要展示源语言文本的区域、用户输入框、提交按钮，还有用来显示结果的提示区：

<div class="translation-app">
  <h3>请翻译以下西班牙语词汇：</h3>
  <p id="source-text">está</p>
  <input type="text" id="user-input" placeholder="输入英语翻译...">
  <button id="submit-btn">提交验证</button>
  <p id="result-message"></p>
</div>

2. 存储翻译配对数据 #

用一个对象来存储源语言和正确翻译的对应关系，后续可以轻松扩展更多词汇：

// 示例：西语-英语翻译配对
const translationPairs = {
  "está": "is",
  "café": "coffee",
  "niño": "child",
  "españa": "spain"
};

// 可选：随机选择一个词汇展示，增加趣味性
const sourceTexts = Object.keys(translationPairs);
let currentSource = sourceTexts[Math.floor(Math.random() * sourceTexts.length)];
document.getElementById('source-text').textContent = currentSource;

3. 核心：重音容错的比对函数 #

这是实现容错处理的关键！我们需要一个工具函数，把带重音的字符转换成无重音的形式，这样用户输入esta也能匹配正确的está：

function removeAccents(str) {
  // 使用Unicode规范化分解字符和重音标记，再移除重音
  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}

// 比对用户输入和正确翻译的函数
function validateTranslation(userInput, correctAnswer) {
  // 统一转成小写、去除首尾空格、去掉重音后再比对
  const cleanedInput = removeAccents(userInput.trim().toLowerCase());
  const cleanedAnswer = removeAccents(correctAnswer.trim().toLowerCase());
  return cleanedInput === cleanedAnswer;
}

4. 实现交互验证逻辑 #

给按钮绑定点击事件，获取用户输入，调用比对函数，然后根据结果给出反馈：

const submitBtn = document.getElementById('submit-btn');
const userInput = document.getElementById('user-input');
const resultMsg = document.getElementById('result-message');

submitBtn.addEventListener('click', () => {
  const inputValue = userInput.value;
  const correctTranslation = translationPairs[currentSource];

  if (!inputValue) {
    resultMsg.textContent = "请输入翻译内容哦！";
    resultMsg.style.color = "#ff4444";
    return;
  }

  const isCorrect = validateTranslation(inputValue, correctTranslation);
  if (isCorrect) {
    resultMsg.textContent = "太棒了！答对啦🎉";
    resultMsg.style.color = "#00C851";
    // 可选：答对后自动切换下一个词汇
    currentSource = sourceTexts[Math.floor(Math.random() * sourceTexts.length)];
    document.getElementById('source-text').textContent = currentSource;
    userInput.value = "";
  } else {
    resultMsg.textContent = `答错啦😅，正确翻译是：${correctTranslation}`;
    resultMsg.style.color = "#ff4444";
  }
});

// 可选：支持回车提交
userInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    submitBtn.click();
  }
});

5. 额外优化建议 #

• 可以添加CSS美化页面，让界面更友好
• 加入计分系统，记录用户的正确率
• 支持切换不同的语言对（比如法语-英语）
• 增加输入实时验证功能，用户输入时就提示是否正确

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