如何实现实时输入时自动高亮关键词（无需按空格）

本文详解如何将 HTML 编辑器中关键词的着色逻辑从“按空格后触发”升级为“输入末尾字母即实时着色”，通过替换 keyup 事件为 input 事件、优化 DOM 操作与光标恢复逻辑，确保语法高亮响应迅速且体验流畅。

本文详解如何将 html 编辑器中关键词的着色逻辑从“按空格后触发”升级为“输入末尾字母即实时着色”，通过替换 `keyup` 事件为 `input` 事件、优化 dom 操作与光标恢复逻辑，确保语法高亮响应迅速且体验流畅。

在构建简易 HTML 实时编辑器时，一个常见需求是：当用户输入如

、HELLO 或 /div> 等预设关键词时，希望它们立即高亮（例如变为橙色），而非等待用户敲下空格键才触发着色。原始代码的问题根源在于：changeColor() 函数错误地将 keyup 事件监听器绑定在 input 元素内部，并仅在 keyCode === 32（空格）时执行着色——这导致所有非空格输入均被忽略。

✅ 正确方案：使用 input 事件驱动实时着色

input 事件在

内容发生任何变更（包括输入、删除、粘贴、撤销等）时立即触发，天然适配实时高亮场景。我们应移除冗余的 addEventListener("keyup", ...)，直接在 oninput 属性或 JS 中统一调用 changeColor()：

<div id="editor" contenteditable="true" oninput="changeColor(); showPreview();">
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</div>

同时，changeColor() 函数需重构为无条件执行着色 + 光标修复，不再依赖按键判断：

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();
}

⚠️ 注意：原代码中 range.setStart(child[child.length - 1], 1) 存在风险——child 是 editor.children，但 contenteditable 的子节点可能为或文本节点，且长度动态变化。更健壮的做法是 range.selectNodeContents(editor) 后 collapse(false)，直接定位到内容末尾。

可视化HTML编辑器插件xhedit
可视化HTML编辑器插件xhedit

下载

? applyColoring() 优化要点

去重关键词数组：原代码 ["DIV", "DIV", "H1", "H1"] 含重复项，应精简为 ["DIV", "H1", "P", "HELLO", "", "/"]。
大小写安全匹配：正则使用 "i" 标志，keywords.includes(chunk.toUpperCase()) 确保 hello 和 HELLO 均可匹配。
避免 innerHTML 覆盖格式：element.innerHTML = markup 会重置光标位置，因此必须在赋值后立即恢复光标（见上方 changeColor() 实现）。

? 预览功能增强（防 XSS 安全建议）

原 showPreview() 直接写入 iframe.document.write() 可能引发安全问题。推荐改用 src="data:text/html,... 方式加载内容（已集成在示例中）：

function showPreview() {
  const content = document.getElementById("editor").innerText;
  const encoded = encodeURIComponent(content);
  const dataURL = `data:text/html;charset=utf-8,${encoded}`;
  document.getElementById("preview-window").src = dataURL;
}

此方式自动转义 HTML 特殊字符，规避脚本注入风险。