基于HTML/JavaScript的自定义代码编辑器：语法高亮异常求助

问题根源分析 #

• textarea无法渲染HTML：textarea是纯文本表单控件，强行设置innerHTML会破坏文本结构，导致高亮效果无法正常显示。
• 子串误匹配：原代码用replaceAll替换关键词子串，会错误高亮包含关键词的非目标文本（比如int会匹配intest中的前缀）。
• 事件监听不全面：keydown+setTimeout的组合无法覆盖粘贴、输入法输入等场景，导致高亮时灵时不灵。
• 大小写处理冗余：单独处理大小写的方式会重复替换，且无法匹配混合大小写的关键词（如Int）。

修复方案实现 #

第一步：修改HTML结构 #

将原textarea替换为支持富文本编辑的div：

<div id="editor" contenteditable="true" style="min-height: 200px; border: 1px solid #ccc; padding: 8px; font-family: monospace;"></div>

第二步：修正JavaScript代码 #

const editor = document.getElementById('editor');

// 初始化高亮
updateHighlight(editor.innerText);

// 监听所有文本修改事件
editor.addEventListener("input", function() {
  // 保存当前光标位置
  const selection = window.getSelection();
  const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
  const cursorOffset = range ? range.startOffset : 0;
  const cursorParent = range ? range.startContainer : null;

  // 更新高亮
  updateHighlight(this.innerText);

  // 恢复光标位置，避免编辑体验断裂
  if (cursorParent) {
    const newRange = document.createRange();
    try {
      newRange.setStart(cursorParent, cursorOffset);
      newRange.collapse(true);
      selection.removeAllRanges();
      selection.addRange(newRange);
    } catch (e) {
      // 光标位置恢复失败时自动定位到末尾
      editor.focus();
      const endRange = document.createRange();
      endRange.selectNodeContents(editor);
      endRange.collapse(false);
      selection.removeAllRanges();
      selection.addRange(endRange);
    }
  }
});

function updateHighlight(text) {
  // 处理换行和制表符，再应用高亮
  editor.innerHTML = colorize(text.replace(/\n/g, "<br>").replace(/\t/g, "&#9;"));
}

function colorize(text) {
  const keywords = ["int", "class", "#include", "namespace"];
  // 构建整词匹配正则，支持大小写不敏感
  const keywordRegex = new RegExp(`\\b(${keywords.join('|')})\\b`, 'gi');
  // 替换时保留原文本的大小写格式
  return text.replace(keywordRegex, match => `<span style="color:#569cd6">${match}</span>`);
}

关键修复点说明 #

1. 富文本容器替换：用contenteditable div替代textarea，实现HTML高亮效果的渲染。
2. 精准整词匹配：通过\b单词边界和gi正则标志，确保仅匹配完整的关键词，避免误替换。
3. 全面事件监听：input事件覆盖所有文本修改场景，无需依赖不可靠的setTimeout。
4. 光标位置维护：高亮更新前后保存并恢复光标位置，保证流畅的编辑体验。
5. 高效大小写处理：正则的i标志自动适配所有大小写形式，同时保留原文本的大小写显示。

内容的提问来源于stack exchange，提问作者Gmos