如何实现Div中文本仅可选中完整空格分隔单词？

嘿，这个需求挺实用的！要实现div中文本只能选中完整空格分隔单词的效果，我们可以通过监听文本选择的收尾事件，手动修正选中范围来达成目标。当用户拖动鼠标选中文本后，我们会自动把选中范围调整到最近的单词边界，确保要么没选中某个单词，要么就选中它的全部内容。

具体实现代码 #

<div id="word-selector">
  For example, for the relevant statement, you can select complete content like "be highlighted", but cannot select incomplete word fragments like "be highli". When the mouse is dragged to a partial position of a word, either the word has not been selected or the entire word has been selected.
</div>

<style>
#word-selector {
  padding: 1rem;
  border: 1px solid #eee;
  line-height: 1.6;
  max-width: 600px;
}
</style>

<script>
document.getElementById('word-selector').addEventListener('mouseup', function(e) {
  // 获取当前选中的内容
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  const textNode = range.commonAncestorContainer;
  // 只处理纯文本节点的情况
  if (textNode.nodeType !== Node.TEXT_NODE) return;

  const fullText = textNode.textContent;
  let startOffset = range.startOffset;
  let endOffset = range.endOffset;

  // 把起始位置调整到单词的开头（跳过非空格字符）
  while (startOffset > 0 && !/\s/.test(fullText[startOffset - 1])) {
    startOffset--;
  }
  // 如果起始位置刚好是空格，往后移一位，避免选中前面的空格
  if (startOffset < fullText.length && /\s/.test(fullText[startOffset])) {
    startOffset++;
  }

  // 把结束位置调整到单词的末尾（跳过非空格字符）
  while (endOffset < fullText.length && !/\s/.test(fullText[endOffset])) {
    endOffset++;
  }
  // 如果结束位置的前一个字符是空格，往前移一位，避免选中后面的空格
  if (endOffset > 0 && /\s/.test(fullText[endOffset - 1])) {
    endOffset--;
  }

  // 如果调整后的范围和原范围一致，就不需要更新了
  if (startOffset === range.startOffset && endOffset === range.endOffset) return;

  // 更新选中范围
  range.setStart(textNode, startOffset);
  range.setEnd(textNode, endOffset);
  selection.removeAllRanges();
  selection.addRange(range);
});
</script>

代码逻辑说明 #

1. 事件监听：我们监听mouseup事件——因为用户拖动选中文本后，松开鼠标的瞬间才会确定最终的选中范围，这时候修正范围最合适。
2. 获取选中范围：通过window.getSelection()获取当前的选中对象，再拿到对应的文本范围。
3. 边界调整：
   • 对于起始位置：向前遍历，直到遇到空格，确保选中的是单词的开头；如果起始位置是空格，再往后跳一位，避免选中多余的空格。
   • 对于结束位置：向后遍历，直到遇到空格，确保选中的是单词的末尾；如果结束位置的前一个字符是空格，往前跳一位，避免选中后面的空格。
4. 更新选中范围：把调整后的范围重新设置为选中内容，覆盖用户原来的部分选中。

注意事项 #

• 这个方案是基于空格作为单词分隔符设计的，如果你的文本里有连字符（比如state-of-the-art）、下划线等其他分隔符，需要修改正则表达式/\s/来适配，比如改成/[\s\-_]/。
• 如果div里包含多个子元素（比如<span>、<strong>），需要额外处理跨文本节点的情况，当前代码只针对纯文本节点的场景。

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