浏览器自制迷你代码编辑器中if、else等关键词无法高亮的问题求助

核心问题梳理 #

你的代码存在几个关键问题导致关键词无法正常高亮：

• 事件绑定对象错误：你监听的是textarea，但实际使用的是id="code__space"的contenteditable div，输入事件根本不会触发。
• 替换逻辑重复覆盖：循环中每次都基于初始纯文本做替换，然后直接覆盖innerHTML，前面的高亮会被后续替换冲掉，最终只有最后一个关键词能生效。
• 直接操作innerHTML会导致光标跳转到开头，完全破坏输入体验。

修复后的完整实现 #

HTML（保持原有结构）

<div name="code-space" id="code__space" contenteditable="true"></div>

CSS（添加高亮样式）

.highlight {
  color: #ff79c6;
  font-weight: bold;
}

JavaScript（修复核心逻辑）

const editor = document.getElementById('code__space');
const keywords = ['if', 'else', 'for', 'while', 'function'];

editor.addEventListener('input', function() {
  // 先保存当前光标位置，避免修改DOM后光标丢失
  const selection = window.getSelection();
  const cursorOffset = getCursorOffset(this, selection);
  
  // 获取纯文本内容，避免HTML标签干扰匹配
  let text = this.textContent;
  
  // 一次性匹配所有关键词，避免循环覆盖问题
  const keywordPattern = new RegExp(`\\b(${keywords.join('|')})\\b`, 'g');
  const highlightedText = text.replace(keywordPattern, '<span class="highlight">$1</span>');
  
  // 更新编辑器内容
  this.innerHTML = highlightedText;
  
  // 恢复光标到原来的位置
  restoreCursorPosition(this, cursorOffset);
});

// 获取光标相对于纯文本的偏移量
function getCursorOffset(element, selection) {
  if (selection.rangeCount === 0) return 0;
  const range = selection.getRangeAt(0);
  const preRange = document.createRange();
  preRange.selectNodeContents(element);
  preRange.setEnd(range.startContainer, range.startOffset);
  return preRange.toString().length;
}

// 恢复光标位置
function restoreCursorPosition(element, offset) {
  const selection = window.getSelection();
  const range = document.createRange();
  range.setStart(element.firstChild, offset);
  range.collapse(true);
  selection.removeAllRanges();
  selection.addRange(range);
}

关键优化说明 #

• 一次性批量替换：用keywords.join('|')把所有关键词合并成一个正则，一次完成所有高亮替换，彻底解决循环覆盖的问题。
• 光标位置管理：通过两个工具函数在修改DOM前后保存、恢复光标位置，解决输入时光标跳转到开头的问题。
• 正确绑定元素：直接获取目标div元素，确保输入事件能正常触发。
• 纯文本匹配：始终基于textContent获取纯文本做替换，避免高亮标签被误匹配。

额外扩展建议 #

如果后续要支持更复杂的语法高亮（比如字符串、注释、变量），可以考虑：

• 使用TreeWalker遍历编辑器内的纯文本节点，只修改文本内容，避免破坏DOM结构
• 自己实现简单的词法分析，把代码拆分成不同类型的token（关键词、字符串、标识符等）再分别处理高亮

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