HTML试卷题目怎么动态高亮标出错题位置-html教程-PHP中文网

应直接操作文本节点而非innerHTML，因后者会重绘DOM导致节点引用丢失、结构损坏、高亮错位及事件失效；需用TreeWalker遍历并过滤script/style/textarea等危险区域，仅处理可见纯文本。

html试卷题目怎么动态高亮标出错题位置

直接操作文本节点，别碰 innerHTML —— 否则错题位置会偏移、事件丢失、甚至标签被截断。

为什么用 `innerHTML.replace()` 会标错位置

试卷 HTML 里常混着题干、选项、script 和 textarea，如果对整个容器的 innerHTML 做正则替换，关键词可能落在标签属性里（比如 data-answer="B"）、或被包裹一半（如“选项A”中搜“项A”，结果变成“选项A”），导致 DOM 结构损坏、高亮错位、点击失效。

浏览器解析时把 innerHTML 当作字符串重绘，原始节点引用全部丢失
textarea 和 script 内容也会被误匹配，破坏逻辑或暴露敏感值
中文题干中“服务”匹配到“服务器”“微服务”，必须加词边界限定

只遍历文本节点 + 过滤危险区域

用 TreeWalker 或递归 childNodes，跳过非文本节点和禁用区域，确保只改“人眼看到的文字”：

function highlightMistakes(container, keywords) {
  const walker = document.createTreeWalker(
    container,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: function(node) {
        // 跳过 script/style/textarea 的文本子节点
        const parent = node.parentElement;
        if (parent && ['SCRIPT', 'STYLE', 'TEXTAREA'].includes(parent.tagName)) {
          return NodeFilter.FILTER_REJECT;
        }
        return node.textContent.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
      }
    }
  );

  let node;
  while (node = walker.nextNode()) {
    const text = node.textContent;
    keywords.forEach(keyword => {
      const escaped = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&');
      const reg = new RegExp(`(?$&');
        node.parentNode.replaceChild(span, node);
      }
    });
  }
}

TreeWalker 比递归更稳，自动跳过注释、CDATA 等干扰节点
acceptNode 显式过滤 SCRIPT/STYLE/TEXTAREA，避免执行逻辑被污染
escaped 对关键词做正则转义，防止用户输入 1+1 导致语法错误

高亮后焦点和选区不崩溃的关键动作

学生做完题点“批改”，页面要滚动到第一处错题并聚焦——但 replaceChild 会让原有文本节点消失，getSelection() 或 scrollIntoView() 找不到目标。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

高亮前用 container.querySelectorAll('mark.error') 记录所有错题 mark 元素
高亮完成后，调用 marks[0]?.scrollIntoView({ block: 'center' })，再 marks[0]?.focus()
如果试卷含富文本编辑区（如 contenteditable），需额外调用 container.normalize() 合并相邻文本节点，否则 mark 可能被拆成两段

CSS 必须强覆盖默认样式

mark 默认背景是浅黄，但在试卷里不够醒目；若父容器有 color 或 background 继承，容易被盖住。

.error-highlight mark.error {
  background: #ffebee;
  color: #c62828;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
  text-decoration: none;
}