如何使用原生Javascript保存和恢复浏览器的选中内容

通过浏览器原生Selection、Range API即可实现选中状态的保存和恢复，逻辑如下：

• 保存阶段：获取当前全局选区对象，若存在有效选中片段，克隆选中的Range对象存入临时变量
• 恢复阶段：清空当前选区的所有Range，将之前克隆保存的Range重新加入选区即可恢复原有选中状态

完整代码示例：

// 保存当前选中状态
let savedRange = null;
const selection = window.getSelection();
if (selection.rangeCount > 0) {
  // 克隆Range获得选中状态快照，避免原Range变动影响保存结果
  savedRange = selection.getRangeAt(0).cloneRange();
}

doSomethingThatUsesHiddenInput() // 清除原有选中内容的目标操作

// 恢复选中状态
if (savedRange) {
  selection.removeAllRanges();
  selection.addRange(savedRange);
  savedRange = null; // 清空临时变量避免内存泄漏
}

注意：如果需要操作的选中内容在iframe内，需要将window.getSelection()替换为对应iframe的contentWindow.getSelection()；如果目标操作是异步的，需要确保保存Range时对应的DOM节点未被销毁，否则恢复操作会失效。

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