如何修改JS默认双击行为，将零宽空格视为非单词边界

方法一：移除DOM中的零宽空格（优先推荐） #

如果页面允许修改这些零宽空格，直接把所有对应Unicode字符（\u200B）替换掉，浏览器就会把整段当成一个完整单词，双击自然选中全部：

// 处理指定类名的元素
document.querySelectorAll('.target-text').forEach(el => {
  el.textContent = el.textContent.replace(/\u200B/g, '');
});

// 或者处理整个文档
document.body.textContent = document.body.textContent.replace(/\u200B/g, '');

这种方法从根源解决问题，修改后文本的选中、复制等操作都和普通文本一致，没有后续兼容问题。

方法二：监听双击事件手动选中内容 #

如果不能移除零宽空格（比如有特殊排版需求），可以通过监听双击事件，手动选中目标文本的完整范围：

// 假设目标文本所在元素id为"split-word"
const targetEl = document.getElementById('split-word');

targetEl.addEventListener('dblclick', (e) => {
  e.preventDefault(); // 阻止默认的片段选中行为
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(targetEl); // 选中元素内所有内容
  selection.removeAllRanges();
  selection.addRange(range);
});

如果目标文本分散在多个子元素中，只要找到它们的共同父容器，用同样的方式选中父容器的全部内容即可。如果需要更精准的“逻辑单词”范围，就得根据具体DOM结构遍历文本节点，合并相邻的带零宽空格的文本范围，不过这种场景复杂度较高，按需调整即可。

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