、HELLO、/ 等）时，应立即高亮，而非等待按下空格键。原始代码中将着色逻辑绑定在 keyup 事件并仅响应 keyCode === 32（空格），导致体验延迟且不符合直觉——用户写完 HELLO 后光标停在 O 后，理应立刻着色，而非多敲一次空格。

✅ 核心改进：用 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() 函数本身不再注册事件监听器，而改为纯逻辑函数：接收编辑器元素、执行着色、并安全恢复光标位置。

✅ 着色逻辑优化要点

去重关键词数组：原代码中 ["DIV", "DIV", "H1", "H1", ...] 存在重复，易引发误匹配或性能浪费，应使用 Set 去重后转回数组：
```
const keywords = [...new Set(["DIV", "H1", "P", "HELLO", "", "/"])];
```
正则分词更鲁棒：使用 split() 配合动态生成的捕获组正则，需确保特殊字符（如）被正确转义（本例中因用于 HTML 文本且匹配全词，暂可不转义；生产环境建议对正则元字符预处理）。

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

下载
避免 innerText → innerHTML 的副作用：element.innerText 会剥离所有 HTML 标签，适合纯文本提取；但 element.innerHTML = markup 会重置整个 DOM 结构，导致光标丢失。因此必须在着色后精确还原光标位置——当前方案通过 window.getSelection() 和 Range 实现，但存在兼容性风险（如末尾无子元素时 child[child.length - 1] 报错）。更健壮的做法是记录光标偏移量，或使用 document.execCommand('insertText') 等替代方案（本文保持简洁，采用原逻辑并加防护）：
```
function changeColor() {
  const editor = document.getElementById("editor");
  applyColoring(editor);

  // ✅ 安全恢复光标：仅当有子元素时操作
  const children = editor.children;
  if (children.length > 0) {
    const range = document.createRange();
    const sel = window.getSelection();
    range.selectNodeContents(children[children.length - 1]);
    range.collapse(false); // 光标置于末尾
    sel.removeAllRanges();
    sel.addRange(range);
  }
  editor.focus();
}
```

✅ Preview 优化：使用 data:text/html 替代 srcdoc

原 srcdoc 在部分浏览器中对 contenteditable 内容解析不稳定，且 frame.write() 已废弃。改用 data URL 方式加载预览更可靠：

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

⚠️ 注意事项与最佳实践

性能考量：高频 input 事件可能造成卡顿。如内容较长（>1KB），建议添加防抖（debounce），例如延迟 100ms 执行着色。
关键词大小写敏感：当前逻辑使用 chunk.toUpperCase() 匹配，确保 hello 和 HELLO 均可着色；若需严格区分，可调整 keywords.includes(chunk) 并统一大小写策略。
HTML 特殊字符安全：innerText 自动解码 HTML 实体（如 < →
样式隔离：.statement 类需全局生效，确保 CSS 正确加载；避免 !important，优先用特异性控制。