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

实时高亮关键词：让 HTML 编辑器在输入完成时立即着色

本文教你如何改造一个 contenteditable 编辑器，使其在用户输入每个字符后立即对预设关键词（如 HELLO、

本文教你如何改造一个 contenteditable 编辑器，使其在用户输入每个字符后立即对预设关键词（如 `hello`、`

在原实现中，changeColor() 通过监听 keyup 事件并仅在按下空格键（keyCode === 32）时调用 applyColoring()，导致关键词（如 HELLO）必须以空格结尾才能着色——这违背了“所见即所得”的编辑体验。要实现输入完成即着色（例如敲完最后一个 O 就立刻高亮），关键在于将触发时机从“按键释放”改为“内容变更”，即使用 input 事件。

✅ 正确做法：用 input 事件替代 keyup + space 判断

input 事件在

内容发生任何变化（包括输入、粘贴、删除、回车）时都会触发，且无需判断按键码，天然满足“即时响应”需求。因此，我们应：

移除 changeColor() 中冗余的 addEventListener("keyup", ...)；
直接在 oninput 属性或 JS 中绑定 input 事件；
每次触发时先执行着色，再恢复光标位置（避免着色后光标跳至开头）。

以下是优化后的核心逻辑：

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

function changeColor() {
  const editor = document.getElementById("editor");
  applyColoring(editor);

  // 【关键】保持光标在末尾（防止着色后光标重置）
  const range = document.createRange();
  const sel = window.getSelection();
  const lastChild = editor.lastElementChild || editor;
  range.selectNodeContents(lastChild);
  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" 各出现两次），影响可维护性；
正则分割未处理边界情况（如连续关键词或特殊符号），且 innerHTML 赋值会丢失原有光标状态（需配合上述光标恢复）。

优化后的 applyColoring 更简洁可靠：

function applyColoring(element) {
  const keywords = ["DIV", "H1", "P", "HELLO", "", "/"];
  const pattern = new RegExp(`(${keywords.map(k => k.replace(/[.*+?^${}()|[]\]/g, '\$&')).join('|')})`, 'gi');

  const text = element.innerText;
  // 按关键词分割，保留分隔符，并逐段包装
  const chunks = text.split(pattern);
  let markup = '';

  chunks.forEach(chunk => {
    if (keywords.some(k => k.toLowerCase() === chunk.toLowerCase())) {
      markup += `<span class="statement">${chunk}</span>`;
    } else {
      markup += `<span class="other">${chunk}</span>`;
    }
  });

  element.innerHTML = markup;
}

? 提示：正则中使用 k.replace(/[.*+?^${}()|[]\]/g, '\$&') 可安全转义关键词中的正则元字符（如），避免匹配异常。

⚠️ 注意事项与最佳实践

不要混用 oninput 和 addEventListener：原代码中 oninput="changeColor(); showPreview();" 已足够，无需在 JS 中再次 addEventListener，否则会导致重复执行。
showPreview() 需适配 srcdoc 或 data: URL：直接写入 iframe.contentWindow.document 在现代浏览器中可能因跨域策略失败。推荐改用 src="data:text/html,..."（如答案所示），更安全兼容。
性能考虑：对于超长文本，高频 input 触发可能造成卡顿。生产环境建议添加防抖（debounce），例如延迟 100ms 执行着色。
样式隔离：.other 类需在 CSS 中定义（如 color: inherit;），否则未匹配文本可能失色。