如何在可编辑元素中为指定索引文本添加CSS样式（TypeScript语法高亮）

直接说结论：原生textarea无法实现局部文本样式设置，因为它是纯文本输入控件，内容只能是无格式的纯文本，不支持内嵌HTML标签或局部CSS样式。

要实现你要的语法高亮效果，最简易的方式是用contenteditable="true"的<div>（或<pre>）来模拟textarea的输入体验，同时支持局部文本样式。

具体实现思路 #

1. 把目标文本按需要高亮的索引范围拆分成多个片段
2. 给需要高亮的片段包裹带CSS样式的<span>标签
3. 将拼接后的HTML插入到可编辑容器中
4. 监听输入事件，实时重新计算并更新高亮样式

TypeScript示例代码 #

// 初始化高亮容器
function initHighlightEditor(container: HTMLElement, initialText: string) {
  // 设置容器为可编辑，并模拟textarea样式
  container.contentEditable = 'true';
  container.style.fontFamily = 'monospace';
  container.style.padding = '8px';
  container.style.border = '1px solid #ccc';
  container.style.minHeight = '100px';
  container.style.whiteSpace = 'pre-wrap'; // 保留换行和空格

  // 初始渲染高亮
  updateHighlight(container, initialText, { start: 0, end: 10 });

  // 监听输入事件，实时更新高亮
  container.addEventListener('input', () => {
    const currentText = container.innerText;
    updateHighlight(container, currentText, { start: 0, end: 10 });
  });
}

// 更新高亮样式的核心函数
function updateHighlight(container: HTMLElement, text: string, range: { start: number; end: number }) {
  // 处理索引边界，防止越界
  const safeStart = Math.max(0, range.start);
  const safeEnd = Math.min(text.length, range.end);

  // 拆分文本片段
  const before = text.slice(0, safeStart);
  const highlighted = text.slice(safeStart, safeEnd);
  const after = text.slice(safeEnd);

  // 拼接带样式的HTML
  container.innerHTML = `
    ${escapeHtml(before)}
    <span style="color: red;">${escapeHtml(highlighted)}</span>
    ${escapeHtml(after)}
  `;

  // 恢复光标位置（可选，提升输入体验）
  restoreCursorPosition(container);
}

// 转义HTML特殊字符，防止XSS和格式错乱
function escapeHtml(text: string): string {
  return text.replace(/[&<>"']/g, char => {
    const entities: Record<string, string> = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    return entities[char] || char;
  });
}

// 恢复光标位置的辅助函数（简化版）
function restoreCursorPosition(container: HTMLElement) {
  const selection = window.getSelection();
  if (selection) {
    const range = document.createRange();
    range.selectNodeContents(container);
    range.collapse(false); // 将光标移到末尾
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

// 使用示例
const editorContainer = document.getElementById('editor')!;
initHighlightEditor(editorContainer, '这是一段测试文本，前10个字符会被标红');

注意事项 #

• 光标位置处理：上面的示例只实现了简单的光标恢复，复杂场景（比如在高亮区域中间输入）需要更精细的光标计算
• 性能优化：如果文本很长，频繁重新渲染可能有性能问题，可以考虑只更新变化的部分
• 样式模拟：可以根据需要调整可编辑div的样式，让它更接近原生textarea的外观

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