在JavaScript Range Selection中，如何避免误选非目标节点？

假设我们有这样的场景：文本被拆分为多个单独的<span>标签（每个标签对应一个单词），比如：

<span id="a1">The </span>
<span id="a2">enormous</span>
<span id="a3"> cat </span><span id="a4">sat</span>
<span id="a5"> on </span><span id="a6" style="padding-right: 2px;">the</span>
<span id="a7">very </span><span id="a8">small </span><span id="a9">rug</span><span id="a10">. </span>

用户想要选中cat所在的<span>，但鼠标选择时容易因为精度问题带两侧的空格，导致意外选中相邻的enormous或sat所在的节点。无论间隔是span内的空格、padding、CSS间距还是非换行空格，只要选区延伸到其他节点，默认行为就会把整个节点纳入选中范围。

以下是几种可行的技术思路：

1. 拆分空格到独立不可选中节点（最简便方案） #

如果可以控制HTML结构，把单词间的空格单独放在一个<span>里，并通过CSS禁止选中这些空格节点：

<span id="a1">The</span>
<span class="word-space"> </span>
<span id="a2">enormous</span>
<span class="word-space"> </span>
<span id="a3">cat</span>
<span class="word-space"> </span>
<span id="a4">sat</span>
<!-- 其余节点同理 -->

.word-space {
  user-select: none;
}

这样用户选择单词时，即使鼠标碰到空格，也不会选中空格节点，自然不会触发相邻单词节点被纳入选区的问题。

2. 监听选区变化，实时修正选区（无需修改HTML） #

通过JavaScript监听selectionchange事件，当检测到选区部分选中某个<span>时，自动将选区调整到该节点的边界，确保每个节点要么被完整选中，要么完全排除：

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);

  // 处理选区起始位置
  let startEl = range.startContainer;
  if (startEl.nodeType === Node.TEXT_NODE) {
    startEl = startEl.parentElement;
  }
  if (startEl.tagName === 'SPAN' && range.startOffset > 0 && range.startOffset < startEl.textContent.length) {
    const textNode = startEl.firstChild;
    range.setStart(textNode, 0);
  }

  // 处理选区结束位置
  let endEl = range.endContainer;
  if (endEl.nodeType === Node.TEXT_NODE) {
    endEl = endEl.parentElement;
  }
  if (endEl.tagName === 'SPAN' && range.endOffset > 0 && range.endOffset < endEl.textContent.length) {
    const textNode = endEl.firstChild;
    range.setEnd(textNode, textNode.length);
  }

  // 更新选区
  selection.removeAllRanges();
  selection.addRange(range);
});

这个逻辑会强制选区的起始和结束落在<span>节点的文本边界上，避免部分选中节点的情况，也就不会意外包含相邻节点。

3. 鼠标释放后修正选区（性能更优） #

如果担心selectionchange事件触发过于频繁，可以改为监听mouseup事件，只在用户完成选择后修正选区：

document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  // 识别所有被选区触及的span节点
  const selectedNodes = Array.from(range.commonAncestorContainer.querySelectorAll('span')).filter(node =>
    range.intersectsNode(node)
  );
  // 如果跨多个节点，只保留中间的目标节点（可根据需求调整判断逻辑）
  if (selectedNodes.length > 1) {
    const targetNode = selectedNodes[Math.floor(selectedNodes.length / 2)];
    range.selectNodeContents(targetNode);
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

这种方式可以减少事件触发次数，同时可以根据实际需求定制更精准的选区修正逻辑。

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