如何用JavaScript为打字游戏中HTML文本的单个字母修改背景色

你用textShownInWebPage[i]报错的核心原因是：textShownInWebPage是单个<span>DOM元素，不是字符数组，无法通过索引直接访问单个字符的样式。要实现单个字符的独立高亮，必须先把目标文本拆分为可单独操作的DOM节点。

实现步骤 #

1. 拆分目标文本为独立字符节点
   将原文本的每个字符包裹在独立的<span>中，让每个字符都拥有自己的DOM元素，这样就能单独控制样式。
2. 重写输入校验逻辑
   初始化时生成字符节点数组，每次输入时逐个对比输入字符与目标字符，给对应节点设置正确/错误的高亮样式，同时每次校验前重置所有样式避免残留。

完整修改代码 #

HTML部分

<div><span class="text-to-type"></span></div>
<textarea class="text-box" rows="8" cols="55" oninput="run()"></textarea>

<script src="index.js"></script>

JavaScript部分

// 变量定义
let textBox = document.getElementsByClassName("text-box")[0];
let textContainer = document.getElementsByClassName("text-to-type")[0];
let displayText = "Just some sample text.";
let characterSpans = []; // 存储每个字符的span节点

// 初始化：拆分目标文本为单个span
function initText() {
  textContainer.innerHTML = '';
  characterSpans = [];
  for (const char of displayText) {
    const span = document.createElement('span');
    span.textContent = char;
    textContainer.appendChild(span);
    characterSpans.push(span);
  }
}

const run = () => {
  const typedValue = textBox.value;
  
  // 先重置所有字符的样式，避免上次高亮残留
  characterSpans.forEach(span => {
    span.style.backgroundColor = '';
  });

  let hasError = false;
  // 遍历已输入的字符，逐个校验
  for (let i = 0; i < typedValue.length; i++) {
    // 处理输入长度超过目标文本的情况
    if (i >= displayText.length) {
      hasError = true;
      break;
    }
    if (typedValue[i] !== displayText[i]) {
      // 输入错误的字符标红
      characterSpans[i].style.backgroundColor = "#eb2323";
      hasError = true;
    } else {
      // 输入正确的字符标绿（可替换为你需要的颜色）
      characterSpans[i].style.backgroundColor = "#4CAF50";
    }
  }

  // 可选：全部输入正确时的额外逻辑
  if (!hasError && typedValue.length === displayText.length) {
    console.log("全部输入正确！");
  }
}

// 页面加载完成后初始化文本
window.onload = initText;

关键说明 #

• initText函数在页面加载时自动执行，将目标文本拆分为单个<span>并存储到数组中，后续通过数组索引即可精准操作每个字符的样式。
• 每次输入校验前重置所有字符的背景色，解决了之前高亮状态残留的问题。
• 区分了输入错误、输入正确、输入超长度三种场景，逻辑更完善。你可以根据需求调整正确/错误状态的高亮颜色。

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