文本选区检测算法全解析Fokus如何精准定位页面中的任意选中节点【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/FokusFokus 是一款仅需约 3KB、零依赖的 JavaScript 开源小库它的文本选区检测算法能实时定位你在页面上选中的任意文字或元素并用半透明黑色遮罩覆盖其余内容让选区一眼聚焦。本文完整拆解 Fokus 选中节点定位的完整算法流程即使你是前端新手也能看懂它从鼠标事件到画布高亮的每一步实现。✨一、Fokus 做了什么选中文本全屏聚焦先用一句话概括它的效果你用鼠标拖选页面里任意一段文字整个页面瞬间蒙上黑色半透明遮罩唯独选中的那一块保持清晰。它的三个核心特点极致轻量核心源码仅一个文件js/fokus.js压缩版js/fokus.min.js约 3KB无第三方依赖Canvas 遮罩用canvas绘制黑色遮罩并挖空选区而非逐节点改样式⚡平滑动画选区框带缓动过渡遮罩淡入淡出体验丝滑二、文本选区检测算法4 步精准定位选中节点Fokus 的检测流程可以概括为捕捉拖选 → 取出选中节点 → 合并成矩形 → 画布高亮。下面逐步拆解。1. 监听鼠标事件捕捉正在拖选的瞬间一切从mousedown开始Fokus 在页面按下鼠标左键时注册mousemove和mouseup监听器之后每移动一次鼠标就重新计算一次选区保证高亮框粘手跟随。两个细节右键点击event.which 3直接忽略避免误触发键盘选区CtrlShift 方向键也会通过keydown同步触发更新2. 用 getSelection API 遍历 DOM收集所有选中节点这是算法最核心的一步。Fokus 借助浏览器原生window.getSelection()拿到选区对象先用isCollapsed判断是否真的存在选区光标单击不算选中调用getRangeAt(0)获取 Range它记录了选区的起止容器startContainer/endContainer特例快判如果起点和终点是同一个节点选区只在一个节点内直接返回该节点否则用深度优先的nextNode函数从起点一路走到终点有子节点就钻入firstChild没有就逐级回退祖先去找nextSibling把沿途经过的节点全部收集起来最后再把起点一侧、直到最近公共祖先commonAncestorContainer的部分选中祖先节点补进列表这样无论选区横跨多少段落、嵌套多深最终都变成一张完整的选中节点清单。3. 把一堆节点合并成一个包围矩形拿到节点清单后Fokus 逐个计算它们的屏幕坐标再合并出最小包围盒节点若是#text文本节点且有内容先向上取父元素文本节点本身没有布局尺寸getScreenPosition沿offsetParent链逐级累加offsetLeft/offsetTop得到元素相对视口的坐标用Math.min/Math.max把所有节点的矩形不断扩大合并currentRegion.left Math.min(currentRegion.left, x); currentRegion.top Math.min(currentRegion.top, y); currentRegion.right Math.max(currentRegion.right, x w); currentRegion.bottom Math.max(currentRegion.bottom, y h);最终得到一个left / top / right / bottom四元组就是整个选区在页面上的精准位置。4. Canvas 挖空绘制 缓动动画最后一步在画布上表演先把整块画布填满半透明黑色再用clearRect在选区位置挖出一个透明窗口四周留 5px 的PADDING呼吸空间遮罩透明度从 0 按0.08系数缓动逼近目标值0.75形成淡入效果取消选区时按0.85衰减淡出选区矩形每帧以0.18的系数向目标位置靠近产生滑动吸附的动画感页面滚动时调用updateSelection(true)立即重绘保证遮罩与选区同步不脱节三、容易被忽略的边界处理为什么选区不会乱跳算法健壮性藏在几行过滤逻辑里这也是定位准确的关键边界情况Fokus 的处理宽度、高度均为 0 的元素直接跳过不纳入选区br换行节点正则匹配后排除trim()后为空的文本节点视为无效向上查找或忽略窗口缩放resize时重建画布尺寸同页多次加载window.__fokused标志防止重复初始化这些不选什么的判断比选什么更能决定体验是否稳定。四、快速上手3 步把 Fokus 用到你的网站第 1 步获取源码git clone https://gitcode.com/gh_mirrors/fo/Fokus第 2 步引入脚本——在页面底部加入一行script srcjs/fokus.min.js/script即可无需任何配置。第 3 步打开index.html体验完整效果选中任意文字就能看到全屏聚焦的高亮。五、关键文件导航想深入阅读源码按下面顺序看最高效js/fokus.js— 完整带注释源码选区检测算法全部在这里js/fokus.min.js— 压缩版可直接上生产环境index.html— 官方演示页含多种排版场景css/demo.css— 演示页样式::selection高亮配色可参考README.md— 版本历史记录了从 0.1 到 0.5 的算法改进轨迹总结Fokus 的文本选区检测算法 原生getSelection取选区 DOM 深度遍历收集节点 坐标合并求包围盒 Canvas 挖空动画。4 个环节各司其职才让 3KB 的代码实现了任意选中节点精准定位。掌握这套思路你也可以为任意网站加一个聚焦式的高亮阅读体验。【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
文本选区检测算法全解析Fokus如何精准定位页面中的任意选中节点【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/FokusFokus 是一款仅需约 3KB、零依赖的 JavaScript 开源小库它的文本选区检测算法能实时定位你在页面上选中的任意文字或元素并用半透明黑色遮罩覆盖其余内容让选区一眼聚焦。本文完整拆解 Fokus 选中节点定位的完整算法流程即使你是前端新手也能看懂它从鼠标事件到画布高亮的每一步实现。✨一、Fokus 做了什么选中文本全屏聚焦先用一句话概括它的效果你用鼠标拖选页面里任意一段文字整个页面瞬间蒙上黑色半透明遮罩唯独选中的那一块保持清晰。它的三个核心特点极致轻量核心源码仅一个文件js/fokus.js压缩版js/fokus.min.js约 3KB无第三方依赖Canvas 遮罩用canvas绘制黑色遮罩并挖空选区而非逐节点改样式⚡平滑动画选区框带缓动过渡遮罩淡入淡出体验丝滑二、文本选区检测算法4 步精准定位选中节点Fokus 的检测流程可以概括为捕捉拖选 → 取出选中节点 → 合并成矩形 → 画布高亮。下面逐步拆解。1. 监听鼠标事件捕捉正在拖选的瞬间一切从mousedown开始Fokus 在页面按下鼠标左键时注册mousemove和mouseup监听器之后每移动一次鼠标就重新计算一次选区保证高亮框粘手跟随。两个细节右键点击event.which 3直接忽略避免误触发键盘选区CtrlShift 方向键也会通过keydown同步触发更新2. 用 getSelection API 遍历 DOM收集所有选中节点这是算法最核心的一步。Fokus 借助浏览器原生window.getSelection()拿到选区对象先用isCollapsed判断是否真的存在选区光标单击不算选中调用getRangeAt(0)获取 Range它记录了选区的起止容器startContainer/endContainer特例快判如果起点和终点是同一个节点选区只在一个节点内直接返回该节点否则用深度优先的nextNode函数从起点一路走到终点有子节点就钻入firstChild没有就逐级回退祖先去找nextSibling把沿途经过的节点全部收集起来最后再把起点一侧、直到最近公共祖先commonAncestorContainer的部分选中祖先节点补进列表这样无论选区横跨多少段落、嵌套多深最终都变成一张完整的选中节点清单。3. 把一堆节点合并成一个包围矩形拿到节点清单后Fokus 逐个计算它们的屏幕坐标再合并出最小包围盒节点若是#text文本节点且有内容先向上取父元素文本节点本身没有布局尺寸getScreenPosition沿offsetParent链逐级累加offsetLeft/offsetTop得到元素相对视口的坐标用Math.min/Math.max把所有节点的矩形不断扩大合并currentRegion.left Math.min(currentRegion.left, x); currentRegion.top Math.min(currentRegion.top, y); currentRegion.right Math.max(currentRegion.right, x w); currentRegion.bottom Math.max(currentRegion.bottom, y h);最终得到一个left / top / right / bottom四元组就是整个选区在页面上的精准位置。4. Canvas 挖空绘制 缓动动画最后一步在画布上表演先把整块画布填满半透明黑色再用clearRect在选区位置挖出一个透明窗口四周留 5px 的PADDING呼吸空间遮罩透明度从 0 按0.08系数缓动逼近目标值0.75形成淡入效果取消选区时按0.85衰减淡出选区矩形每帧以0.18的系数向目标位置靠近产生滑动吸附的动画感页面滚动时调用updateSelection(true)立即重绘保证遮罩与选区同步不脱节三、容易被忽略的边界处理为什么选区不会乱跳算法健壮性藏在几行过滤逻辑里这也是定位准确的关键边界情况Fokus 的处理宽度、高度均为 0 的元素直接跳过不纳入选区br换行节点正则匹配后排除trim()后为空的文本节点视为无效向上查找或忽略窗口缩放resize时重建画布尺寸同页多次加载window.__fokused标志防止重复初始化这些不选什么的判断比选什么更能决定体验是否稳定。四、快速上手3 步把 Fokus 用到你的网站第 1 步获取源码git clone https://gitcode.com/gh_mirrors/fo/Fokus第 2 步引入脚本——在页面底部加入一行script srcjs/fokus.min.js/script即可无需任何配置。第 3 步打开index.html体验完整效果选中任意文字就能看到全屏聚焦的高亮。五、关键文件导航想深入阅读源码按下面顺序看最高效js/fokus.js— 完整带注释源码选区检测算法全部在这里js/fokus.min.js— 压缩版可直接上生产环境index.html— 官方演示页含多种排版场景css/demo.css— 演示页样式::selection高亮配色可参考README.md— 版本历史记录了从 0.1 到 0.5 的算法改进轨迹总结Fokus 的文本选区检测算法 原生getSelection取选区 DOM 深度遍历收集节点 坐标合并求包围盒 Canvas 挖空动画。4 个环节各司其职才让 3KB 的代码实现了任意选中节点精准定位。掌握这套思路你也可以为任意网站加一个聚焦式的高亮阅读体验。【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
![洛谷 P7912：[CSP-J 2021 T4] 小熊的果篮 ← 双向链表](http://pic.xiahunao.cn/yaotu/洛谷 P7912：[CSP-J 2021 T4] 小熊的果篮 ← 双向链表)
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
