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-\u200D\uFEFF]/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）或右键菜单，它们不抢焦点
真正麻烦的从来不是获取文本，而是准确判断“用户此刻到底想搜什么”——选区位置、光标上下文、输入法状态、甚至是否处于编辑中，都会让看似简单的功能变得边界模糊。
