开发学生文档高亮应用：如何避免浏览器自动开闭标签获取选中HTML

我帮你梳理下这个问题的核心和可行的解决方案哈～

问题根源 #

你现在用的Range.surroundContents()方法有个硬性限制：它要求选中的范围必须是一个完整的DOM节点（或者能被包裹成完整节点的内容）。当用户选中的文本跨多个HTML元素、或者部分选中某个带标签的文本时，浏览器会自动拆分、补全标签来保证DOM结构合法，这就导致你获取的HTML和预期的选中内容不匹配——哪怕是像"Super wonder ultra mega promotion."这种看似简单的文本，如果它原本嵌套在其他标签里，部分选中后也会触发浏览器的自动修正。

可行解决方案 #

我们可以换一种更灵活的方式实现高亮，同时精准获取选中内容的HTML，避开浏览器的自动修正逻辑：

1. 替代surroundContents()的高亮实现 #

用extractContents()和文档片段来手动处理选中内容，既能实现高亮，又能更好控制DOM结构：

function highlightSelectedText() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const targetRange = selection.getRangeAt(0);
  // 提取选中内容为独立的文档片段，不会破坏原有DOM
  const selectedFragment = targetRange.extractContents();
  
  // 创建高亮标签并插入片段
  const highlightMark = document.createElement('mark');
  highlightMark.appendChild(selectedFragment);
  
  // 将高亮标签插回原位置
  targetRange.insertNode(highlightMark);
  
  // 可选：保持用户的选中状态
  selection.removeAllRanges();
  const newRange = document.createRange();
  newRange.selectNodeContents(highlightMark);
  selection.addRange(newRange);
  
  return highlightMark;
}

2. 精准获取选中内容的原始HTML #

如果你需要获取未被高亮包裹前的选中内容HTML，可以在修改DOM前先克隆选中范围的内容，避免浏览器的自动修正：

function getSelectedContentHTML() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return '';

  const targetRange = selection.getRangeAt(0);
  // 克隆选中内容的片段，完全不影响原有DOM结构
  const clonedContent = targetRange.cloneContents();
  // 用临时容器把片段转成HTML字符串
  const tempContainer = document.createElement('div');
  tempContainer.appendChild(clonedContent);
  
  return tempContainer.innerHTML;
}

这种方式下，不管用户选中的内容是否跨标签、是否部分选中带格式的文本，你获取到的HTML都会准确对应用户选中的部分，不会出现浏览器自动补全/修改标签的问题。

额外小贴士 #

如果你的应用需要支持用户编辑已有的高亮内容，还可以给<mark>标签加个自定义属性（比如data-highlight-id），方便后续关联评论、修改或删除高亮。

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