如何通过window.getSelection获取用户划选文本并实现自定义搜索

window.getSelection() 返回空字符串是因为执行时机错误，应在 selectionchange 或 mouseup 事件中获取选区，并用 cloneContents().textContent 清洗文本后处理。

为什么 window.getSelection() 返回空字符串？

常见现象是点击按钮后 getSelection().toString() 拿到空值，其实不是 API 失效，而是执行时机不对——比如在 click 事件里调用，但用户划选动作早已结束，浏览器已清除选区。

正确做法是监听 mouseup（鼠标松开）或 selectionchange（选区变化），这两个事件能真实捕获划选完成的瞬间：

• selectionchange 是最稳妥的选择，它在任何方式触发选区变化时都触发（包括键盘 Shift+方向键、双击、拖拽）
• mouseup 更直观，但仅覆盖鼠标操作；若用户用键盘选中文字，它不会响应
• 注意：必须确保监听在 document 上，而不是某个局部元素，否则 iframe 或 contenteditable 区域外的选区会漏掉

如何提取纯文本并过滤不可见字符？

window.getSelection() 返回的是 Selection 对象，直接 .toString() 虽然能拿到文本，但可能混入换行符、多余空格、零宽空格（u200B）甚至富文本中的隐藏标记（比如某些编辑器插入的  ）。

建议用以下方式清洗：

• 先用 getSelection().getRangeAt(0)?.cloneContents() 获取 DOM 片段，再用 textContent 提取——比 toString() 更可靠，避开渲染层干扰
• 对结果做 .replace(/[u200B-u200DuFEFF]/g, '') 清除零宽字符
• 再用 .trim().replace(/s+/g, ' ') 合并连续空白为单个空格
• 如果目标是搜索，还要考虑是否保留首尾标点：比如用户划选了 "hello,"，要不要自动去掉逗号？这取决于你的搜索逻辑，不能一概而论

怎么把划选文本传给自定义搜索函数？

别在事件回调里直接写搜索逻辑，容易耦合且难测试。推荐封装成可复用的函数，接收选中文本作为参数：

function handleSelectedText(text) {  if (!text.trim()) return;  // 这里调你的搜索 API，比如：  fetch(`/api/search?q=${encodeURIComponent(text)}`)    .then(r => r.json())    .then(showResults);}

绑定时注意上下文：

• 在 selectionchange 回调中，要加防抖（setTimeout + clearTimeout），避免频繁触发（比如用户反复拖动选区）
• 如果页面有多个可交互区域（如侧边栏、弹窗），需判断当前选区是否落在主内容区：getSelection().anchorNode?.closest('.main-content')
• 移动端 Safari 对 selectionchange 支持较弱，必要时降级用 touchend + 延迟 300ms 再读取选区

为什么划选后点击按钮没反应？

这是最常被忽略的一点：浏览器默认行为会清空选区。比如你在划选一段文字后，立刻点击一个 <button>，此时 click 事件触发前，焦点切换导致选区丢失。

解决办法只有两个：

• 把搜索触发逻辑放在 mousedown 阶段（按钮按下的瞬间），而不是 click（松开才触发）
• 或者用 event.preventDefault() 阻止按钮默认聚焦行为，但要注意这会影响可访问性（屏幕阅读器可能无法识别按钮状态）
• 更稳妥的做法是：放弃“点击按钮触发”，改用快捷键（如 Ctrl/Cmd+Enter）或右键菜单，它们不抢焦点

真正麻烦的从来不是获取文本，而是准确判断“用户此刻到底想搜什么”——选区位置、光标上下文、输入法状态、甚至是否处于编辑中，都会让看似简单的功能变得边界模糊。