选区与格式维护的关键在于通过Selection和Range API精确控制光标位置，保存还原选区时结合offset与节点标识防失效，格式化时继承样式并优化DOM结构，撤销重做需同步保存选区快照，跨浏览器场景下采用Polyfill或抽象层统一行为，确保编辑体验一致。
在开发 JavaScript 富文本编辑器时，选区（Selection）与格式维护是核心难点。用户在编辑过程中频繁进行加粗、斜体、插入链接等操作，如何准确捕获光标位置、保留原有样式并避免格式错乱，直接影响编辑体验。下面从关键机制出发，介绍实用的选区管理与格式维护方案。
选区的获取与还原
浏览器提供了 Selection 和 Range API 来操作文档中的选区。富文本编辑的核心在于对这些对象的精确控制。
获取当前选区：
const selection = window.getSelection();const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
保存 range 可用于后续恢复光标位置，尤其在异步操作或内容重渲染后非常关键。
立即学习“Java免费学习笔记（深入）”；
还原选区：
selection.removeAllRanges();selection.addRange(savedRange);
注意：DOM 结构变更可能导致 range 失效，因此建议结合 offset 和唯一标识（如节点路径或数据属性）做容错处理。
格式化操作与样式继承
执行加粗、颜色等格式命令时，应优先使用 document.execCommand（尽管已废弃，但在兼容性要求高的场景仍可用），或手动操作 DOM 节点实现更精细控制。
推荐采用以下策略维护格式一致性：
- 在插入或修改内容前，分析当前选区所在节点的父级样式，继承常用格式（如 font-size、color）
- 对行内元素（如 span、a、strong）进行包裹时，避免生成冗余标签，可通过合并相邻同类型节点优化结构
- 使用 normalize() 方法清理文本节点分裂问题
例如，在用户输入时监听 input 或 keyup 事件，动态检查光标所在位置的 computedStyle，实时更新工具栏状态。
撤销与历史栈中的选区快照
为了支持撤销/重做时正确恢复光标位置，应在每次用户操作前保存选区快照。
实现思路：
- 绑定 beforeinput 或 mousedown/keyup 事件，记录当时的 range
- 将 contentHTML 与 selectionRange 一同存入历史栈
- 撤销时先恢复内容，再还原 range
可封装一个 SelectionState 类，提供 save() 和 restore() 方法，提升代码复用性。
跨浏览器兼容性处理
不同浏览器对 Range 和 Selection 的实现存在细微差异，特别是移动端 Safari 和旧版 IE。
应对建议：
- 避免直接依赖 range.startOffset 在非文本节点上的表现
- 在容器元素（如 div、p）内点击时，判断是否需要创建临时文本节点以定位光标
- 使用 Polyfill 或抽象层库（如 Rangy）统一接口
移动端还需处理软键盘弹起导致的 scrollIntoView 问题，确保光标不被遮挡。
基本上就这些。选区与格式维护的关键在于及时保存状态、合理操作 DOM 并做好边界处理。虽然浏览器 API 不够直观，但通过封装和测试覆盖，可以构建出稳定可靠的富文本交互逻辑。
