如何使用 JavaScript 为 HTML 文本中的单个字母动态设置背景色-html教程-PHP中文网

如何使用 JavaScript 为 HTML 文本中的单个字母动态设置背景色

本文介绍在打字练习类应用中，通过 javascript 动态高亮用户已输入字符的正确性——逐字符比对并为每个字母单独添加绿色（正确）或红色（错误）背景色，避免整段文本统一变色，提升交互反馈精度。

本文介绍在打字练习类应用中，通过 javascript 动态高亮用户已输入字符的正确性——逐字符比对并为每个字母单独添加绿色（正确）或红色（错误）背景色，避免整段文本统一变色，提升交互反馈精度。

要实现「按字符粒度」高亮文本（如打字游戏中的实时对错反馈），关键在于：不操作整个元素的 style.backgroundColor，而是将原文本拆分为独立的元素，再根据输入状态分别设置其样式。

直接访问 textShownInWebPage[i] 报错的原因是：textShownInWebPage 是一个 DOM 元素（），它本身不支持用数组下标访问子字符——DOM 节点不是字符串数组，element[i] 语法无效。

✅ 正确做法是：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

将目标文本（如 "Just some sample text."）逐字符拆解；
为每个字符包裹一个标签，并赋予唯一标识（如 data-index）；
在 run() 中遍历用户输入，逐位比对，并动态更新对应的 class 或内联样式。

以下是完整、可运行的解决方案：

<div>
  <span class="text-to-type" id="targetText">Just some sample text.</span>
</div>
<textarea class="text-box" rows="8" cols="55" oninput="run()"></textarea><style>
  .text-to-type span {
    padding: 0 2px;
    transition: background-color 0.15s ease;
  }
  .correct { background-color: #a8e6a1; }   /* 浅绿色 */
  .incorrect { background-color: #ff9a9a; } /* 浅红色 */
  .untyped { background-color: transparent; }
</style><script>
  const targetEl = document.getElementById('targetText');
  const inputBox = document.querySelector('.text-box');
  const displayText = targetEl.textContent;

  // 初始化：将每个字符包装进 span
  targetEl.innerHTML = displayText.split('').map((char, i) => 
    `<span data-index="${i}">${char === ' ' ? ' ' : char}`
  ).join('');

  function run() {
    const typed = inputBox.value;

    // 遍历所有字符 span，按索引设置状态
    targetEl.querySelectorAll('span').forEach(span => {
      const idx = parseInt(span.dataset.index);

      if (idx < typed.length) {
        if (typed[idx] === displayText[idx]) {
          span.className = 'correct';
        } else {
          span.className = 'incorrect';
        }
      } else {
        span.className = 'untyped';
      }
    });
  }

  // 页面加载后立即初始化一次
  window.addEventListener('DOMContentLoaded', () => {
    run(); // 确保初始状态一致
  });
</script>

? 注意事项与优化建议：