在原生 HTML 中，textarea 不支持内联 HTML 渲染，因此无法直接通过 innerHTML 插入 实现语法高亮；正确方案是用 contenteditable 的 替代，并结合 DOM 操作安全插入带样式的片段。

在原生 html 中，textarea 不支持内联 html 渲染，因此无法直接通过 `innerhtml` 插入 `` 实现语法高亮；正确方案是用 `contenteditable` 的 `

` 替代，并结合 dom 操作安全插入带样式的片段。

实现动态语法高亮的核心前提，是放弃使用 ——因为它仅接受纯文本，innerHTML 赋值会被忽略或转义，上述示例代码在 textarea 上<strong>实际无效</strong>。正确做法是采用 contenteditable="true" 的容器（如 <div>），并借助浏览器原生的 Range 和 Selection API 精准操作文本节点。<p>以下是一个健壮、可复用的高亮函数示例：</p> <pre class="brush:php;toolbar:false;">function highlightText( element: HTMLElement, start: number, end: number, color: string = '#d32f2f', className: string = 'syntax-highlight' ) { // 清除已有高亮（可选） element.querySelectorAll(`.${className}`).forEach(el => { el.replaceWith(...el.childNodes); }); const textNode = element.firstChild as Text | null; if (!textNode || !textNode.textContent) return; const fullText = textNode.textContent; if (start fullText.length || start > end) return; // 创建文档片段用于安全插入 const fragment = document.createDocumentFragment(); // 插入前置文本 if (start > 0) { fragment.appendChild(document.createTextNode(fullText.substring(0, start))); } // 插入高亮 span const span = document.createElement('span'); span.className = className; span.style.color = color; span.textContent = fullText.substring(start, end); fragment.appendChild(span); // 插入后置文本 if (end <p>⚠️ 注意事项： </p></pre> <ul> <li> <strong>不要对 <textarea> 调用 innerHTML：它不解析 HTML，赋值后只会显示原始字符串（如 abc 作为明文）；

确保目标元素为 contenteditable 且初始含纯文本节点，避免嵌套 HTML 干扰文本定位；

实际语法高亮器需配合词法分析（如正则分词或 AST），本例仅演示基础范围着色；

若需保留光标位置、支持撤销/重做或处理换行/富文本，建议基于 ProseMirror 或 CodeMirror 6 构建，而非手动操作 DOM。

综上，动态 span 插入完全可行，但必须建立在语义正确的可编辑容器之上——这是实现前端轻量级语法高亮的基石。