实时高亮关键词：让 HTML 编辑器在输入完成瞬间自动着色-html教程-PHP中文网

实时高亮关键词：让 HTML 编辑器在输入完成瞬间自动着色

本文教你如何修改 javascript 代码，将原本依赖空格键触发的关键词着色逻辑，升级为实时响应输入（即每输入一个字符后立即匹配并高亮关键词），无需等待空格或回车，提升编辑体验。

本文教你如何修改 javascript 代码，将原本依赖空格键触发的关键词着色逻辑，升级为实时响应输入（即每输入一个字符后立即匹配并高亮关键词），无需等待空格或回车，提升编辑体验。

要实现“输入完关键词最后一字母即刻着色”，核心在于事件监听策略的重构：原方案使用 keyup + 判断空格键（keyCode === 32），本质是延迟响应；而正确做法是改用 input 事件——它在

内容发生任何变化（包括输入、删除、粘贴）时立即触发，真正满足“实时”需求。

✅ 正确实现方式

首先，移除所有冗余的 addEventListener("keyup", ...) 绑定，不再监听键盘事件；其次，将 changeColor() 函数从事件监听器中解耦，使其成为一个纯粹的“更新渲染”函数，并直接在 oninput 属性中调用：

<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); // 光标置于末尾
  sel.removeAllRanges();
  sel.addRange(range);
}

? 注意：原代码中 applyColoring() 存在两个关键问题：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载
keywords 数组含重复项（如 "DIV"、"H1" 各出现两次），应去重；
正则分割逻辑未处理边界情况（如连续符号 >），但对基础关键词着色已足够稳定。优化后的 keywords 推荐写为：
const keywords = ["DIV", "H1", "P", "HELLO", "", "/"];

? applyColoring() 的健壮性增强（可选优化）

为避免 innerHTML 覆盖导致光标丢失或格式错乱，建议在着色前保存当前光标位置，着色后再还原。但对简单场景，上述方案已足够稳定。若需更高鲁棒性，可引入 document.execCommand('insertText') 或 Range API 精准操作文本节点，但本教程聚焦核心逻辑，暂不展开。

⚠️ 重要注意事项

不要混合使用 onchange 和 oninput：onchange 在元素失去焦点时才触发，完全不符合实时需求；务必统一使用 oninput。
contenteditable 元素慎用 innerText：它会自动解码 HTML 实体（如 < → 等标签符号），但若需保留原始转义字符，则应改用 textContent 并调整正则。
预览 iframe 安全限制：使用 srcdoc 或 data: URL 加载预览内容更安全可靠，避免跨域问题。示例中已采用 data:text/html,... 方式，兼容性良好。