在纯文本编辑区域（如 textarea）中无法直接应用 HTML 样式；需改用 contenteditable 的 或 等富文本容器，并通过 DOM 操作在指定字符范围内包裹带内联样式的 ，从而实现动态语法高亮。
在纯文本编辑区域（如 textarea）中无法直接应用 html 样式；需改用 `contenteditable` 的 `
` 或 `
` 等富文本容器，并通过 dom 操作在指定字符范围内包裹带内联样式的 `<span>`，从而实现动态语法高亮。</p><p>实现动态语法高亮的关键在于：<strong>放弃 <textarea>，改用 contenteditable="true" 的 HTML 元素</strong>。因为 <textarea> 仅支持纯文本，其 value 属性无法渲染 HTML 标签；而 contenteditable 元素（如 <div>）允许插入和渲染 HTML 结构，从而支持对任意字符范围应用样式。</p><p>以下是一个基于 TypeScript 的轻量级高亮函数示例，适用于 contenteditable 的 <div>：</p><pre class="brush:php;toolbar:false;">function applyHighlight(
element: HTMLElement,
start: number,
end: number,
color: string = '#d32f2f',
className?: string
): void {
// 清除现有内容（避免嵌套污染）
element.textContent = element.textContent || '';
const text = element.textContent || '';
if (start < 0 || end > text.length || start > end) {
console.warn('Invalid range: start or end out of bounds');
return;
}
const before = text.substring(0, start);
const highlightedText = text.substring(start, end);
const after = text.substring(end);
// 构建安全的高亮片段
const span = document.createElement('span');
span.style.color = color;
if (className) span.className = className;
span.textContent = highlightedText;
// 重建 DOM：纯文本 + 高亮节点 + 纯文本
element.innerHTML = '';
element.appendChild(document.createTextNode(before));
element.appendChild(span);
element.appendChild(document.createTextNode(after));
}
// 使用示例
const editor = document.getElementById('code-editor') as HTMLElement;
editor.contentEditable = 'true';
editor.textContent = 'function hello() { return "world"; }';
// 将前 8 个字符（"function"）标红
applyHighlight(editor, 0, 8, '#e53935');⚠️ 重要注意事项：
- ✅ 必须使用 contenteditable 元素（如 ），不可用于 ；
- ✅ 调用前建议清空 innerHTML 并用 textContent 获取原始文本，避免 HTML 解析干扰索引计算；
- ⚠️ 该方法不处理光标位置、撤销栈或嵌套高亮，生产环境建议结合 Range / Selection API 或使用 Monaco/CodeMirror 等专业编辑器；
- ? 若需支持 XSS 安全，应避免直接拼接用户输入到 innerHTML，此处因 textContent 已剥离 HTML，且 span.textContent 为安全赋值，风险可控。
总结：动态语法高亮的本质是「文本分段 + DOM 插入」。掌握字符索引与 contenteditable 的协同机制，即可构建轻量、可扩展的基础高亮能力——它是通向更复杂编辑器功能（如关键字匹配、括号配对、主题切换）的重要起点。
