如何通过鼠标选中内容移除span标签并追加至父节点？

原始HTML结构 #

<p>An <span class="item1">easyJet pilot</span> has told tourists that flying to<span class="item2">Rhodes</span> is a “terrible idea” just minutes before taking off, it has been reported, as <span class="item3">wildfires spread across Greece</span> journalist Gwyn Loader, who was on the flight to the island to report for BBC Wales Welsh-language news programme Newyddion, said <span class="item4">eight passengers</span> subsequently decided to disembark, including a young boy who was in tears.</p>

需求 #

当鼠标选中某个span标签或span的部分内容时，移除该span标签对选中内容的包裹，将选中的文本直接放到其父节点p中。例如选中“across”时，原<span class="item3">wildfires spread across Greece</span>会拆分为<span class="item3">wildfires spread</span>和<span class="item3">Greece</span>，“across”直接作为p的子节点存在。

现有尝试代码 #

用户尝试了以下函数，但无法生效：

function cleanup() {
  const selObj = window.getSelection();
  const selRange = selObj.getRangeAt(0);
  selRange.outerHTML = selRange.innerHTML
}

问题原因 #

Range对象本身没有outerHTML和innerHTML属性，直接赋值这些属性不会产生任何DOM修改效果。要实现需求，需要利用Range的DOM操作方法来拆分节点、提取并移动选中内容。

正确实现方案 #

下面是可以实现需求的cleanup函数：

function cleanup() {
  const selection = window.getSelection();
  // 处理无选中内容的情况
  if (selection.rangeCount === 0) return;
  
  const range = selection.getRangeAt(0);
  const startSpan = range.startContainer.parentElement.closest('span');
  const endSpan = range.endContainer.parentElement.closest('span');
  
  // 确保选中内容在同一个span内
  if (!startSpan || startSpan !== endSpan) return;
  
  const span = startSpan;
  const parent = span.parentElement;
  
  // 拆分span节点，提取选中内容前后的部分与选中内容
  // 提取选中内容之前的部分
  const preRange = document.createRange();
  preRange.setStartBefore(span);
  preRange.setEnd(range.startContainer, range.startOffset);
  const preContent = preRange.extractContents();
  
  // 提取选中内容之后的部分
  const postRange = document.createRange();
  postRange.setStart(range.endContainer, range.endOffset);
  postRange.setEndAfter(span);
  const postContent = postRange.extractContents();
  
  // 提取选中的核心内容
  const selectedContent = range.extractContents();
  
  // 按顺序将内容插入父节点
  parent.insertBefore(preContent, span);
  parent.insertBefore(selectedContent, span);
  parent.insertBefore(postContent, span);
  
  // 删除原空span
  span.remove();
  
  // 清除选区避免误操作
  selection.removeAllRanges();
}

代码说明 #

1. 先判断是否有有效选区，以及选中内容是否处于同一个span内
2. 使用extractContents()方法拆分原span的内容，拆分为「选中前内容」「选中内容」「选中后内容」三部分
3. 将三部分内容按原顺序插入到父节点中，再删除已空的原span
4. 最后清除选区，避免后续不必要的DOM操作干扰

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