使用JS给选中文本插入链接时聚焦输入框丢失Selection如何解决

window.getSelection() 返回的是与文档选区状态绑定的实时可变对象，本身无法被持久存储，焦点切换后会自动更新属性，JSON序列化也无法捕获它的动态映射属性。你不需要存储整个Selection对象，只需要存储选区对应的Range对象快照即可，具体实现如下：

方案1：提前克隆存储Range对象 #

这是兼容性最好的通用方案，适合绝大多数编辑器场景：

1. 选中文本时即时存储Range快照
   在用户完成文本选中的时机（比如鼠标松开、键盘选中操作结束、用户点击「插入链接」功能按钮的瞬间），立刻克隆当前选区的Range对象存储：

// 全局/编辑器实例内存储保存的Range
let savedRange = null;

// 示例：监听编辑器区域的鼠标松开事件捕获选区
editorArea.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  // 仅在有选中内容、不是光标闪烁状态时存储
  if (selection.rangeCount > 0 && !selection.isCollapsed) {
    savedRange = selection.getRangeAt(0).cloneRange();
  }
})

2. 用户提交链接后恢复选区执行插入
   等用户在输入框填写完链接地址，先把存储的Range恢复到当前选区，再执行你原来的包裹逻辑：

function handleLinkSubmit(linkUrl) {
  if (!savedRange) return;

  // 恢复之前保存的选区
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(savedRange);

  // 执行原包裹a标签逻辑
  const linkNode = document.createElement("a");
  linkNode.textContent = savedRange.toString();
  linkNode.href = linkUrl;
  linkNode.target = "_blank";
  savedRange.deleteContents();
  savedRange.insertNode(linkNode);

  // 用完清空存储的Range避免重复操作
  savedRange = null;
}

方案2：阻止输入框抢占选区（轻量场景可用） #

如果你的场景比较简单，可以直接在输入框的mousedown事件里阻止默认行为，这样点击输入框时不会丢失原文本选区，连存储Range的步骤都不需要：

const linkInput = document.querySelector('#link-input');
linkInput.addEventListener('mousedown', (e) => {
  // 阻止默认的焦点切换行为，原文本选区会保留
  e.preventDefault();
})

后续用户填写完链接后直接读取window.getSelection()的当前值操作即可。

注意事项 #

如果存储Range期间，编辑区域的DOM结构发生了修改（比如有其他内容插入/删除操作），存储的Range位置可能发生偏移，这种场景可以序列化存储Range的四个核心属性：startContainer、startOffset、endContainer、endOffset，需要使用时再用这四个属性重新构造Range即可，前提是对应的DOM节点没有被销毁。

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