富文本编辑器中光标定位的本质是先通过getselection().getrangeat(0)获取range，再用if/switch/循环判断其startcontainer、startoffset及dom上下文，据此执行插入、包裹等操作，流程控制仅用于解析而非决定光标位置。
富文本编辑器中处理光标定位的条件判断，本质不是 JavaScript 流程控制“决定”光标在哪，而是用流程控制（if、switch、循环等）去识别当前光标所处的 DOM 上下文，再据此执行插入、包裹、删除或聚焦等操作。关键在于：先准确获取光标位置信息，再用条件逻辑做决策。
获取并解析光标位置是前提
必须先调用 getSelection() 和 getRangeAt(0) 获取选区（Selection + Range），再通过 range.startContainer、range.startOffset 等属性定位到具体节点和偏移量。常见需判断的上下文包括：
- 光标是否在
<p></p>、<div contenteditable> 或嵌套的 <code><span></span>内 - 光标前/后一个字符是否为空格、换行、标点或特定标记（如
**、[ ]） - 光标是否位于某个自定义节点（如
<img data-type="emoji">）的边界 - 选区是否跨多个块级元素（如从
<p></p>开始，到<h2></h2>结束）
用 if/else 判断 DOM 路径决定行为
拿到 startContainer 后，常通过向上遍历父节点（node.parentElement）判断语义环境。例如实现“回车键在标题后自动创建段落”：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const sel = window.getSelection();
if (sel.rangeCount === 0) return;
const range = sel.getRangeAt(0);
const container = range.startContainer;
<p>// 判断光标是否在 h1–h6 标签内部且处于末尾
const heading = container.parentElement?.closest('h1, h2, h3, h4, h5, h6');
if (heading && range.startOffset === heading.textContent.length) {
// 插入新 </p><p> 并聚焦
const p = document.createElement('p');
heading.after(p);
focusAtStart(p);
}
</p>
用 switch 区分不同节点类型做差异化处理
当光标落在不同语义节点时，插入行为应不同。比如快捷键 Ctrl+B 加粗：
- 若在纯文本节点（
TEXT_NODE），则包裹其父<span></span>或创建新<strong></strong> - 若已在
<strong></strong>内，取消加粗（移除外层标签） - 若选区跨多个块（如含表格、列表项），则禁用操作或降级为提示
可用 switch(container.nodeType) 或 switch(container.parentElement?.tagName) 分支处理：
switch (container.parentElement?.tagName) {
case 'STRONG':
case 'B':
unwrapStrong(container.parentElement); // 移除加粗
break;
case 'P':
case 'DIV':
wrapWithStrong(range); // 包裹选区
break;
default:
// 检查最近的可编辑祖先， fallback 处理
const editable = container.parentElement?.closest('[contenteditable="true"]');
if (editable) wrapWithStrong(range);
}
循环辅助边界检测与内容扫描
某些场景需向前/向后扫描相邻文本内容，比如实现“输入 ## 自动转为二级标题”。这时要用 while 循环沿 text node 遍历：
let prevNode = range.startContainer;
let offset = range.startOffset;
let chars = '';
<p>// 向前取最多 4 个字符（含空格）
while (chars.length </p><p>if (/^#{2}\s$/.test(chars)) {
convertToHeading(range, 'h2');
}
</p>
流程控制本身不移动光标，但它让编辑器能“看懂”光标在哪、周围是什么，从而做出合理响应。核心是把 DOM 结构、文本内容、选区位置三者结合，用条件逻辑桥接用户意图与 DOM 操作。
