如何将单词中指定字母替换为输入框以实现语法练习功能？

你当前的问题大概率是因为多了“转空格再替换输入框”的步骤，导致HTML渲染时位置错位，或者直接替换时没处理好字符与输入框的对应关系。直接一步到位，匹配目标字符后直接生成对应输入框即可，不用绕空格转换的弯路。

核心实现代码 #

先处理随机取词逻辑，再通过正则全局匹配ó和u，用replace的回调函数直接生成对应输入框：

// 示例单词数组
const wordList = ["habló", "tuvo", "caminó", "durmió"];

// 随机抽取单词
function getRandomWord() {
  const randomIndex = Math.floor(Math.random() * wordList.length);
  return wordList[randomIndex];
}

// 生成带输入框的练习文本
function generateExercise() {
  const targetWord = getRandomWord();
  // 全局匹配ó和u，替换为带正确值标记的输入框
  const exerciseHTML = targetWord.replace(/[óu]/g, (match) => {
    return `<input type="text" class="grammar-input" data-correct="${match}" size="1" maxlength="1">`;
  });
  // 将生成的HTML插入页面容器
  document.getElementById("exercise-container").innerHTML = exerciseHTML;
}

// 答案校验逻辑
function checkAnswers() {
  const inputs = document.querySelectorAll(".grammar-input");
  let allCorrect = true;
  inputs.forEach(input => {
    const correctChar = input.dataset.correct;
    if (input.value.toLowerCase() !== correctChar.toLowerCase()) {
      allCorrect = false;
      input.style.borderColor = "red";
    } else {
      input.style.borderColor = "green";
    }
  });
  alert(allCorrect ? "全部正确！" : "还有错误，再检查一下～");
}

// 页面加载时自动生成练习
window.onload = generateExercise;

配套HTML结构 #

<div id="exercise-container"></div>
<button onclick="checkAnswers()">提交校验</button>

关键细节说明 #

• 用正则/[óu]/g直接匹配要隐藏的字符，每个匹配项对应生成一个输入框，确保输入框位置和原字符位置完全对应，不会错位。
• 给输入框设置size="1"和maxlength="1"，让输入框宽度刚好适配单个字符，视觉上和原单词排版一致。
• 把正确字符存在data-correct属性中，校验时直接取值对比，无需额外存储原单词（也可以选择缓存原单词，两种方式都可行）。
• 校验时统一转小写对比，避免大小写输入差异导致误判，提升用户体验。

这样处理后，输入框位置会完全贴合原单词中ó和u的位置，后续的语法校验逻辑也能正常运行。

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