如何实现实时关键词高亮：输入即着色，无需空格触发

本文讲解如何将 HTML 编辑器中关键词（如 HELLO、）的着色逻辑从“按空格后触发”升级为“输入完成即实时高亮”，通过改用 input 事件替代 keyup + space 判断，并优化 DOM 操作与光标恢复逻辑。

本文讲解如何将 html 编辑器中关键词（如 `hello`、`

`）的着色逻辑从“按空格后触发”升级为“输入完成即实时高亮”，通过改用 `input` 事件替代 `keyup + space` 判断，并优化 DOM 操作与光标恢复逻辑。

在构建类代码编辑器的富文本区域（contenteditable）时，一个常见需求是：对预设关键词（如 HTML 标签、自定义指令）进行即时语法高亮。原始实现依赖 keyup 事件监听空格键（keyCode === 32），导致用户必须输入完整单词（如 HELLO）后再敲空格，高亮才生效——这严重违背直觉，也影响编码体验。

核心改进：用 input 事件替代 keyup + space

input 事件在

 中任何内容变更（包括输入、粘贴、删除、撤销）后立即触发，且无需判断按键类型，天然适配“所见即所得”的实时着色需求。我们只需移除原 changeColor() 中冗余的事件监听器注册逻辑，将其改造为纯函数，并在 oninput 属性中直接调用：<div id="editor" contenteditable="true" oninput="changeColor(); showPreview();">
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</div>
同时，changeColor() 函数需精简重构：不再监听事件，而是直接获取编辑器元素并执行着色，同时确保光标位置不因 innerHTML 重写而丢失：
function changeColor() {
  const editor = document.getElementById("editor");
  applyColoring(editor);

  // 恢复光标至末尾（关键！避免输入中断）
  const range = document.createRange();
  const sel = window.getSelection();
  range.selectNodeContents(editor);
  range.collapse(false); // collapse to end
  sel.removeAllRanges();
  sel.addRange(range);
  editor.focus();
}
applyColoring() 的健壮性增强
原函数存在重复关键词（如 "DIV", "DIV"）、大小写敏感缺陷及未处理空格/换行导致的匹配断裂。优化后：

去重并精简关键词数组；
使用 RegExp 的 i 标志实现不区分大小写匹配；

split() 后 filter(Boolean) 清理空字符串；
严格比对 chunk.toUpperCase() 与关键词，避免部分匹配（如 "HE" 误匹配 "HELLO"）；

function applyColoring(element) {
  const keywords = ["DIV", "H1", "P", "HELLO", "", "/"];
  const text = element.innerText;

  // 构建分隔正则：匹配任意关键词（不区分大小写）
  const regex = new RegExp(keywords.map(k => `(${k})`).join("|"), "gi");
  const chunks = text.split(regex).filter(Boolean);

  let markup = "";
  chunks.forEach(chunk => {
    // 精确匹配：转为大写后检查是否在关键词列表中
    if (keywords.includes(chunk.toUpperCase())) {
      markup += `<span class="statement">${chunk}</span>`;
    } else {
      markup += `<span class="other">${chunk}</span>`;
    }
  });

  element.innerHTML = markup;
}
注意事项与最佳实践

✅ 避免 onchange 陷阱：contenteditable 元素不触发 change 事件，原 onchange="changeColor()" 无效，应全部移除；
✅ showPreview() 安全性提升：使用 data:text/html URL 方式加载 iframe 内容，规避 document.write() 在已加载文档中的潜在错误；
⚠️ 性能提醒：高频 input 触发下，若关键词量极大或文本极长，可引入防抖（debounce）——但本例中轻量级着色无需过度优化；
⚠️ 样式隔离：.other 类需在 CSS 中明确定义（如 color: inherit;），否则可能继承异常颜色；
? 安全警告：生产环境切勿直接将用户输入写入 srcdoc 或 document.write()，需做 HTML 实体转义或使用 DOMPurify 等库防范 XSS。

最后，初始化时务必调用 changeColor() 和 showPreview() 一次，确保页面加载后即呈现正确样式与预览。整套方案简洁、可靠，真正实现“敲完最后一个字母，高亮立刻浮现”的专业编辑体验。