JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容

2024-05-24 14:04
文章标签 实现 选择 页面 内容 js html 鼠标 对应 frontend 返回 文案 框选

本文主要是介绍JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容

一、需求背景

1、项目需求

当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。

2、需求解析

虽然这需求就一句话的事，但是很显然，没那么简单…

因为鼠标框选说起来简单，就是选择的内容，但是这包含很多中情况，比如：只选择文案、选择图片、选择输入框、输入框中的内容选择、iframe、等。

简单总结，分为以下几点：

  1. 选择文案时

  2. 选择图片、svg、iframe、video、audio 等标签时

  3. 选择 input、select、textarea 等标签时

  4. 选择 input、textarea 标签内容时

  5. 选择类似   字符时

  6. 键盘全选时

  7. 鼠标右键选择

  8. 以上各模块结合时

  9. 当包含标签的时候，返回 html 结构，只有文本时返回文本内容

二、技术要点

鼠标框选包含以下几点：

  1. debounce 防抖

  2. addEventListener 事件监听

  3. Range 对象

  4. Selection 对象

1、debounce

老生常谈的技术点了，这里不能用节流，因为肯定不能你鼠标选择的时候，隔一段时间返回一段内容，肯定是选择之后一起返回。

这里用 debounce 主要也是用在事件监听和事件处理上。

  • 【debounce 掘金】
  • 【debounce CSDN】

2、addEventListener

事件监听，因为鼠标选择，不仅仅是鼠标按下到鼠标抬起，还包括双击、右键、全选。

需要使用事件监听对事件作处理。

  • 【addEventListener MDN】

3、Range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

Range 是浏览器原生的对象。

image

3.1. 创建 Range 实例，并设置起始位置
<body><ul><li>Vite</li><li>Vue</li><li>React</li><li>VitePress</li><li>NaiveUI</li></ul>
</body>
<script>// 创建 Range 对象const range = new Range()const liDoms = document.querySelectorAll("li");// Range 起始位置在 li 2range.setStartBefore(liDoms[1]);// Range 结束位置在 li 3range.setEndAfter(liDoms[2]);// 获取 selection 对象const selection = window.getSelection();// 添加光标选择的范围selection.addRange(range);
</script>

image

可以看到，选择内容为第二行和第三行

3.1.1 浏览器兼容情况

image

3.2. Range 属性

  1. startContainer：起始节点。

  2. startOffset：起始节点偏移量。

  3. endContainer：结束节点。

  4. endOffset：结束节点偏移量。

  5. collapsed：范围的开始和结束是否为同一点。

  6. commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一级的节点。

3.2.1. 用我们上面创建的实例来看下 range 属性的值

image

3.2.2. 如果我们只选择文本内容时

只选择 li 中的 itePres

image

可以看出 range 属性对应的值

image

3.3. Range 方法

  1. cloneContents()：复制范围内容，并将复制的内容作为 DocumentFragment 返回。

  2. cloneRange()：创建一个具有相同起点/终点的新范围， 非引用，可以随意改变，不会影响另一方。

  3. collapse(toStart)：如果 toStart=true 则设置 end=start，否则设置 start=end，从而折叠范围。

  4. compareBoundaryPoints(how, sourceRange)：两个范围边界点进行比较，返回一个数字 -1、0、1。

  5. comparePoint(referenceNode, offset)：返回-1、0、1具体取决于 是 referenceNode 在 之前、相同还是之后。

  6. createContextualFragment(tagString)：返回一个 DocumentFragment。

  7. deleteContents()：删除框选的内容。

  8. extractContents()：从文档中删除范围内容，并将删除的内容作为 DocumentFragment 返回。

  9. getBoundingClientRect()：和 dom 一样，返回 DOMRect 对象。

  10. getClientRects()：返回可迭代的对象序列 DOMRect。

  11. insertNode(node)：在范围的起始处将 node 插入文档。

  12. intersectsNode(referenceNode)：判断与给定的 node 是否相交。

  13. selectNode(node)：设置范围以选择整个 node。

  14. selectNodeContents(node)：设置范围以选择整个 node 的内容。

  15. setStart(startNode, startOffset)：设置起点。

  16. setEnd(endNode, endOffset)：设置终点。

  17. setStartBefore(node)：将起点设置在 node 前面。

  18. setStartAfter(node)：将起点设置在 node 后面。

  19. setEndBefore(node)：将终点设置为 node 前面。

  20. setEndAfter(node)：将终点设置为 node 后面。

  21. surroundContents(node)：使用 node 将所选范围内容包裹起来。

3.4. 创建 Range 的方法
3.4.1. Document.createRange
const range = document.createRange();
3.4.2. Selection 的 getRangeAt() 方法
const range = window.getSelection().getRangeAt(0)
3.4.3. caretRangeFromPoint() 方法
if (document.caretRangeFromPoint) {range = document.caretRangeFromPoint(e.clientX, e.clientY);
}
3.4.4. Range() 构造函数
const range = new Range()
3.5. Range 兼容性

image

  • 【详细兼容性：Can I use】

4、Selection

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。

4.1. 获取文本对象
window.getSelection()

image

image

4.2. Selection 术语
4.2.1. 锚点 (anchor)

锚指的是一个选区的起始点（不同于 HTML 中的锚点链接）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。

4.2.2. 焦点 (focus)

选区的焦点是该选区的终点，当你用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。

4.2.3. 范围 (range)

范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围。

4.2.4. 可编辑元素 (editing host)

一个用户可编辑的元素（例如一个使用 contenteditable 的 HTML 元素，或是在启用了 designMode 的 Document 的子元素）。

4.3. Selection 的属性

首先要清楚，选择的起点称为锚点(anchor)，终点称为焦点(focus)。

  1. anchorNode：选择的起始节点。

  2. anchorOffset：选择开始的 anchorNode 中的偏移量。

  3. focusNode：选择的结束节点。

  4. focusOffset：选择开始处 focusNode 的偏移量。

  5. isCollapsed：如果未选择任何内容（空范围）或不存在，则为 true。

  6. rangeCount：选择中的范围数，之前说过，除 Firefox 外，其他浏览器最多为1。

  7. type：类型：None、Caret、Range

4.4. Selection 方法

  1. addRange(range): 将一个 Range 对象添加到当前选区。

  2. collapse(node, offset): 将选区折叠到指定的节点和偏移位置。

  3. collapseToEnd(): 将选区折叠到当前选区的末尾。

  4. collapseToStart(): 将选区折叠到当前选区的起始位置。

  5. containsNode(node, partlyContained): 判断选区是否包含指定的节点，可以选择是否部分包含。

  6. deleteFromDocument(): 从文档中删除选区内容。

  7. empty(): 从选区中移除所有范围（同 `removeAllRanges()``，已废弃）。

  8. extend(node, offset): 将选区的焦点节点扩展到指定的节点和偏移位置。

  9. getRangeAt(index): 返回选区中指定索引处的 Range 对象。

  10. removeAllRanges(): 移除所有选区中的范围。

  11. removeRange(range): 从选区中移除指定的 Range 对象。

  12. selectAllChildren(node): 选中指定节点的所有子节点。

  13. setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 设置选区的起始和结束节点及偏移位置。

  14. setPosition(node, offset)：collapse 的别名

4.5. Selection 兼容性

image

  • 【详细兼容性：Can I use】

三、项目实现

1、实现思路

  1. 先获取选择的内容，开发 getSelectContent 函数
  2. 对获取的内容进行判断，是否存在 selection 实例，没有直接返回 null
  3. 判断 selection 实例的 isCollapsed 属性
    • 没有选中，对 selection 进行 toString().trim() 操作，判断内容
      • 有内容，直接返回 text 类型
      • 无内容，返回 null
    • 有选中，则判断内容
  4. 判断选中的内容有没有节点
    • 没有节点，则和没有选中一样处理，进行 toString().trim() 操作，判断内容
      • 有内容，直接返回 text 类型
      • 无内容，返回 null
    • 有节点，进行 toString().trim() 操作，判断内容
      • 没有内容，判断是否有特殊节点
        • 有 'iframe', 'svg', 'img', 'audio', 'video' 节点，返回 html 类型
        • 有 'input', 'textarea', 'select'，判断 value 值，是否存在
          • 存在：返回 html 类型
          • 不存在：返回 null
        • 没有特殊节点，返回 null
      • 有内容，返回 html 类型
  5. 对鼠标 mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件进行监听，触发 getSelectContent 函数
  6. 在需要的地方进行 debounce 防抖处理

2、简易流程图

image

2、Debounce 方法实现

2.1. JS
function debounce (fn, time = 500) {let timeout = null; // 创建一个标记用来存放定时器的返回值return function () {clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeoutfn.apply(this, arguments)}, time)}
}
2.2. TS
/*** debounce 函数类型*/
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/*** debounce 防抖函数* @param {Function} func 函数* @param {number} wait 等待时间* @param {false} immediate 是否立即执行* @returns {DebouncedFunction}*/
function debounce<F extends (...args: any[]) => any>(func: F,wait = 500,immediate = false
): DebouncedFunction<F> {let timeout: ReturnType<typeof setTimeout> | nullreturn function (this: ThisParameterType<F>, ...args: Parameters<F>) {// eslint-disable-next-line @typescript-eslint/no-this-aliasconst context = thisconst later = function () {timeout = nullif (!immediate) {func.apply(context, args)}}const callNow = immediate && !timeoutif (timeout) {clearTimeout(timeout)}timeout = setTimeout(later, wait)if (callNow) {func.apply(context, args)}}
}

3、获取选择的文本/html 元素

3.1. 获取文本/html 元素
nterface IGetSelectContentProps {type: 'html' | 'text'content: string
}
/*** 获取选择的内容* @returns {null | IGetSelectContentProps} 返回选择的内容*/
const getSelectContent = (): null | IGetSelectContentProps => {const selection = window.getSelection()if (selection) {// 1. 是焦点在 input 输入框// 2. 没有选中// 3. 选择的是输入框if (selection.isCollapsed) {return selection.toString().trim().length? {type: 'text',content: selection.toString().trim()}: null}// 获取选择范围const range = selection.getRangeAt(0)// 获取选择内容const rangeClone = range.cloneContents()// 判断选择内容里面有没有节点if (rangeClone.childElementCount > 0) {// 创建 div 标签const container = document.createElement('div')// div 标签 append 复制节点container.appendChild(rangeClone)// 如果复制的内容长度为 0if (!selection.toString().trim().length) {// 判断是否有选择特殊节点const isSpNode = hasSpNode(container)return isSpNode? {type: 'html',content: container.innerHTML}: null}return {type: 'html',content: container.innerHTML}} else {return selection.toString().trim().length? {type: 'text',content: selection.toString().trim()}: null}} else {return null}
}
/*** 判断是否包含特殊元素* @param {Element} parent 父元素* @returns {boolean} 是否包含特殊元素*/
const hasSpNode = (parent: Element): boolean => {const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']const inpList = ['input', 'textarea', 'select']return Array.from(parent.children).some((node) => {if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return trueif (inpList.includes(node.nodeName.toLocaleLowerCase()) &&(node as HTMLInputElement).value.trim().length)return trueif (node.children) {return hasSpNode(node)}return false})
}
3.2. 只需要文本
/*** 获取框选的文案内容* @returns {string} 返回框选的内容*/
const getSelectTextContent = (): string => {const selection = window.getSelection()return selection?.toString().trim() || ''
}

4、添加事件监听

// 是否时鼠标点击动作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {const selectContent = getSelectContent()console.log('selectContent', selectContent)// todo... 处理上报selectionchangeMouseTrack = false
})
// 添加 mousedown 监听事件
document.addEventListener('mousedown', () => {selectionchangeMouseTrack = true
})
// 添加 mouseup 监听事件
document.addEventListener('mouseup',debounce(() => {selectionChangeFun()}, 100)
)
// 添加 selectionchange 监听事件
document.addEventListener('selectionchange',debounce(() => {if (selectionchangeMouseTrack) returnselectionChangeFun()})
)
// 添加 dblclick 监听事件
document.addEventListener('dblclick', () => {selectionChangeFun()
})
// 添加 contextmenu 监听事件
document.addEventListener('contextmenu',debounce(() => {selectionChangeFun()})
)

也可以进行封装

/*** addEventlistener function 类型*/
export interface IEventHandlerProps {[eventName: string]: EventListenerOrEventListenerObject
}let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {// 鼠标 down 事件mousedown: () => {selectionchangeMouseTrack = true},// 鼠标 up 事件mouseup: debounce(() => selectionChangeFun(), 100),// 选择事件selectionchange:  debounce(() => {if (selectionchangeMouseTrack) returnselectionChangeFun()}),// 双击事件dblclick: () => selectionChangeFun(),// 右键事件contextmenu: debounce(() => selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event) => {document.addEventListener(event, eventHandlers[event])
})

5、返回内容

5.1. 纯文本内容

image

5.2. html 格式

image

6. 完整 JS 代码

function debounce (fn, time = 500) {let timeout = null; // 创建一个标记用来存放定时器的返回值return function () {clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeoutfn.apply(this, arguments)}, time)}
}let selectionchangeMouseTrack = false
document.addEventListener('mousedown', (e) => {selectionchangeMouseTrack = trueconsole.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e) => {console.log('mouseup', e)selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e) => {console.log('selectionchange', e)if (selectionchangeMouseTrack) returnselectionChangeFun()
}))
document.addEventListener('dblclick', (e) => {console.log('dblclick', e)selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(() => {selectionChangeFun()
}))const selectionChangeFun = debounce(() => {const selectContent = getSelectContent()selectionchangeMouseTrack = falseconsole.log('selectContent', selectContent)
})const getSelectContent = () => {const selection = window.getSelection();if (selection) {// 1. 是焦点在 input 输入框// 2. 没有选中// 3. 选择的是输入框if (selection.isCollapsed) {return selection.toString().trim().length ? {type: 'text',content: selection.toString().trim()} : null}// 获取选择范围const range = selection.getRangeAt(0);// 获取选择内容const rangeClone = range.cloneContents()// 判断选择内容里面有没有节点if (rangeClone.childElementCount > 0) {const container = document.createElement('div');container.appendChild(rangeClone);if (!selection.toString().trim().length) {const hasSpNode = getSpNode(container)return hasSpNode ? {type: 'html',content: container.innerHTML} : null}return {type: 'html',content: container.innerHTML}} else {return selection.toString().trim().length ? {type: 'text',content: selection.toString().trim()} : null}} else {return null}
}const getSpNode = (parent) => {const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']const inpList = ['input', 'textarea', 'select']return Array.from(parent.children).some((node) => {if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return trueif (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return trueif (node.children) {return getSpNode(node)}return false})
}

7. 线上预览

  • 【码上掘金】

四、总结

  1. 鼠标框选上报能监控用户在页面的行为，能为后续的数据分析等提供便利

  2. 基于 JS 中的 Selection 和 Range 实现的，使用原生 JS

  3. 涉及到的操作比较多，包含键盘、鼠标右键、全选等

  4. 能对框选的内容进行分类，区别 html 和 text，更方便的看出用户选择了哪些内容

引用

  • 【Range】
  • 【Selection】

这篇关于JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/998618。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
如何选择适合孤独症兄妹的学校？

如何选择适合孤独症兄妹的学校？

在探索适合孤独症儿童教育的道路上，每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时，选择一所能够同时满足两个孩子特殊需求的学校，更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择，并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症，这一复杂的神经发育障碍，影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2