HTML中如何禁止用户选中文本部分片段，仅允许选中完整单词

这个需求完全可以实现，主流有两种可落地的方案：

方案1：JS监听选择事件动态修正选区 #

核心逻辑是监听全局的selectionchange事件，每次用户触发选中文本操作时，自动把当前选区的起止边界扩展到最近的单词边界，覆盖用户手动选中的部分片段：

• 首先通过window.getSelection()获取当前的选区对象
• 若当前选区是折叠状态（无选中内容）则直接跳过逻辑
• 调用原生选区操作方法，将选区起点回退到最近的单词边界，终点前进到最近的单词边界，最终选区自动调整为完整单词

核心示例代码：

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  // 没有选中内容时直接返回
  if (selection.isCollapsed) return;
  // 回退起点到前一个单词边界
  selection.modify('move', 'backward', 'word');
  // 扩展终点到后一个单词边界
  selection.modify('extend', 'forward', 'word');
});

纯英文场景下该方案可直接使用，中英文混合场景需要额外自定义单词匹配规则调整边界判定逻辑

方案2：DOM拆分+CSS属性控制 #

提前将页面需要限制选中规则的文本，按单词拆分为独立的<span>标签，给每个标签设置user-select: all属性，用户点击/选中单个标签内的文本时，浏览器会自动选中整个标签的全部内容，无法选中部分片段：

核心示例代码：

<!-- 原始文本：Hello! Nice to meet you -->
<div class="text-wrapper">
  <span style="user-select: all">Hello!</span>
  <span style="user-select: all">Nice</span>
  <span style="user-select: all">to</span>
  <span style="user-select: all">meet</span>
  <span style="user-select: all">you</span>
</div>

该方案兼容性更好，适配所有主流浏览器，缺点是需要提前对渲染文本做单词拆分预处理，动态生成的文本需要额外拼接拆分后的DOM结构

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