如何在语法高亮编辑器中保持光标位置不变-html教程-PHP中文网

如何在语法高亮编辑器中保持光标位置不变

通过分离输入层（透明 textarea）与渲染层（contenteditable 或 pre），避免 innerhtml 重写导致的光标跳转，实现流畅的实时语法高亮。

通过分离输入层（透明 textarea）与渲染层（contenteditable 或 pre），避免 innerhtml 重写导致的光标跳转，实现流畅的实时语法高亮。

在实现“实时语法高亮”编辑器时，一个常见却棘手的问题是：每当调用 element.innerHTML = ... 更新高亮内容，浏览器会重建 DOM 子树，导致原生

的光标（selection）丢失并重置到开头。即使尝试用 getSelection() + Range 恢复位置，也极易因文本替换前后字符偏移、换行符归一化、HTML 实体解析等差异而失败。

推荐解法：分层架构——输入与渲染解耦

核心思想是将用户输入与视觉渲染彻底分离：

MedPeer天生会写

一款AI论文写作工具，主要用于全流程智能科研文稿生成平台，基于真实文献，一键生成优质全文，全学科适用，适合需要提升相关任务效率的用户。

下载

✅ 输入层：使用（或 <input type="text">）捕获所有键盘/粘贴事件，保证原生光标行为稳定；

✅ 渲染层：使用

 或 <div> 仅负责显示高亮后的 HTML，不接受直接输入；<li>✅ <strong>样式叠加</strong>：将 textarea 设置为 color: transparent; caret-color: white; background: transparent;，并精确覆盖在渲染层上方，形成“所见即所写”的视觉一致性。</li>
<p>以下是可直接运行的完整实现：</p>
<pre class="brush:php;toolbar:false;"><textarea id="input" spellcheck="false"></textarea><pre class="brush:php;toolbar:false;" id="code">

#input, #code {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 16px;
  font: 1rem/1.5 monospace;
  color: white;
  background-color: #141414;
  border: none;
  outline: none;
  resize: none;
  overflow-wrap: break-word;
}

#input {
  color: transparent;        /* 隐藏文字，保留光标 */
  caret-color: #fff;         /* 白色光标 */
  background: transparent;   /* 透出下方 pre 的背景 */
  z-index: 2;
}

#code {
  z-index: 1;
  pointer-events: none;      /* 确保点击穿透到 textarea */
}

const inputEl = document.getElementById('input');
const codeEl = document.getElementById('code');

function highlight(text) {
  // 注意：需对特殊字符进行 HTML 转义，防止 XSS 和标签解析错误
  const escapeHtml = str => str
    .replace(/&/g, '&')
    .replace(/, '<')
    .replace(/>/g, '>')
    .replace(/"/g, '"')
    .replace(/'/g, ''');

  const escaped = escapeHtml(text);

  // 关键：先转义再匹配，确保正则作用于纯文本而非 HTML 标签
  return escaped
    .replace(/\b(function|const|let)\b/g, '<span style="color:pink">$&</span>')
    .replace(/(["']).*?\1/g, '<span style="color:#0d0;font-weight:normal">$&</span>')
    .replace(/([a-zA-Z_\d]+)\s*\([^)]*\)/g, '<span style="color:#0bb;font-weight:bold">$1</span>$2')
    .replace(/([a-zA-Z_\d]+\.)+/g, '<span style="color:yellow">$&</span>');
}

inputEl.addEventListener('input', () => {
  codeEl.innerHTML = highlight(inputEl.value);
});

// 初始化 & 自动聚焦
inputEl.value = 'const greet = () => "Hello";\nconsole.log(greet());';
codeEl.innerHTML = highlight(inputEl.value);
inputEl.focus();

✅ 关键注意事项：