发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

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

退思养草

8

主题

8

帖子

24

积分

新手上路

Rank: 1

积分
24
显示全部楼层
JS 实现鼠标框选（页面选择）时返回对应的代码或文案内容

一、需求背景

1、项目需求

当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。
2、需求解析

虽然这需求就一句话的事，但是很显然，没那么简单...
因为鼠标框选说起来简单，就是选择的内容，但是这包含很多中情况，比如：只选择文案、选择图片、选择输入框、输入框中的内容选择、iframe、等。
简单总结，分为以下几点：

  • 选择文案时
  • 选择图片、svg、iframe、video、audio 等标签时
  • 选择 input、select、textarea 等标签时
  • 选择 input、textarea 标签内容时
  • 选择类似   字符时
  • 键盘全选时
  • 鼠标右键选择
  • 以上各模块结合时
  • 当包含标签的时候，返回 html 结构，只有文本时返回文本内容
二、技术要点

鼠标框选包含以下几点：

  • debounce 防抖
  • addEventListener 事件监听
  • Range 对象
  • Selection 对象
1、debounce

老生常谈的技术点了，这里不能用节流，因为肯定不能你鼠标选择的时候，隔一段时间返回一段内容，肯定是选择之后一起返回。
这里用 debounce 主要也是用在事件监听和事件处理上。
2、addEventListener

事件监听，因为鼠标选择，不仅仅是鼠标按下到鼠标抬起，还包括双击、右键、全选。
需要使用事件监听对事件作处理。
3、Range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。
Range 是浏览器原生的对象。

3.1. 创建 Range 实例，并设置起始位置
  1. <body>
  2.   <ul>
  3.     <li>Vite</li>
  4.     <li>Vue</li>
  5.     <li>React</li>
  6.     <li>VitePress</li>
  7.     <li>NaiveUI</li>
  8.   </ul>
  9. </body>
复制代码

可以看到，选择内容为第二行和第三行
3.1.1 浏览器兼容情况


3.2. Range 属性


  • startContainer：起始节点。
  • startOffset：起始节点偏移量。
  • endContainer：结束节点。
  • endOffset：结束节点偏移量。
  • collapsed：范围的开始和结束是否为同一点。
  • commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一级的节点。
3.2.1. 用我们上面创建的实例来看下 range 属性的值


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

只选择 li 中的 itePres

可以看出 range 属性对应的值

3.3. Range 方法


  • cloneContents()：复制范围内容，并将复制的内容作为 DocumentFragment 返回。
  • cloneRange()：创建一个具有相同起点/终点的新范围， 非引用，可以随意改变，不会影响另一方。
  • collapse(toStart)：如果 toStart=true 则设置 end=start，否则设置 start=end，从而折叠范围。
  • compareBoundaryPoints(how, sourceRange)：两个范围边界点进行比较，返回一个数字 -1、0、1。
  • comparePoint(referenceNode, offset)：返回-1、0、1具体取决于 是 referenceNode 在 之前、相同还是之后。
  • createContextualFragment(tagString)：返回一个 DocumentFragment。
  • deleteContents()：删除框选的内容。
  • extractContents()：从文档中删除范围内容，并将删除的内容作为 DocumentFragment 返回。
  • getBoundingClientRect()：和 dom 一样，返回 DOMRect 对象。
  • getClientRects()：返回可迭代的对象序列 DOMRect。
  • insertNode(node)：在范围的起始处将 node 插入文档。
  • intersectsNode(referenceNode)：判断与给定的 node 是否相交。
  • selectNode(node)：设置范围以选择整个 node。
  • selectNodeContents(node)：设置范围以选择整个 node 的内容。
  • setStart(startNode, startOffset)：设置起点。
  • setEnd(endNode, endOffset)：设置终点。
  • setStartBefore(node)：将起点设置在 node 前面。
  • setStartAfter(node)：将起点设置在 node 后面。
  • setEndBefore(node)：将终点设置为 node 前面。
  • setEndAfter(node)：将终点设置为 node 后面。
  • surroundContents(node)：使用 node 将所选范围内容包裹起来。
3.4. 创建 Range 的方法

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


4、Selection

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
4.1. 获取文本对象
  1. window.getSelection()
复制代码


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)。

  • anchorNode：选择的起始节点。
  • anchorOffset：选择开始的 anchorNode 中的偏移量。
  • focusNode：选择的结束节点。
  • focusOffset：选择开始处 focusNode 的偏移量。
  • isCollapsed：如果未选择任何内容（空范围）或不存在，则为 true。
  • rangeCount：选择中的范围数，之前说过，除 Firefox 外，其他浏览器最多为1。
  • type：类型：None、Caret、Range
4.4. Selection 方法


  • addRange(range): 将一个 Range 对象添加到当前选区。
  • collapse(node, offset): 将选区折叠到指定的节点和偏移位置。
  • collapseToEnd(): 将选区折叠到当前选区的末尾。
  • collapseToStart(): 将选区折叠到当前选区的起始位置。
  • containsNode(node, partlyContained): 判断选区是否包含指定的节点，可以选择是否部分包含。
  • deleteFromDocument(): 从文档中删除选区内容。
  • empty(): 从选区中移除所有范围（同 `removeAllRanges()``，已废弃）。
  • extend(node, offset): 将选区的焦点节点扩展到指定的节点和偏移位置。
  • getRangeAt(index): 返回选区中指定索引处的 Range 对象。
  • removeAllRanges(): 移除所有选区中的范围。
  • removeRange(range): 从选区中移除指定的 Range 对象。
  • selectAllChildren(node): 选中指定节点的所有子节点。
  • setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 设置选区的起始和结束节点及偏移位置。
  • setPosition(node, offset)：collapse 的别名
4.5. Selection 兼容性


三、项目实现

1、实现思路


  • 先获取选择的内容，开发 getSelectContent 函数
  • 对获取的内容进行判断，是否存在 selection 实例，没有直接返回 null
  • 判断 selection 实例的 isCollapsed 属性

    • 没有选中，对 selection 进行 toString().trim() 操作，判断内容

      • 有内容，直接返回 text 类型
      • 无内容，返回 null

    • 有选中，则判断内容

  • 判断选中的内容有没有节点

    • 没有节点，则和没有选中一样处理，进行 toString().trim() 操作，判断内容

      • 有内容，直接返回 text 类型
      • 无内容，返回 null

    • 有节点，进行 toString().trim() 操作，判断内容

      • 没有内容，判断是否有特殊节点

        • 有 'iframe', 'svg', 'img', 'audio', 'video' 节点，返回 html 类型
        • 有 'input', 'textarea', 'select'，判断 value 值，是否存在

          • 存在：返回 html 类型
          • 不存在：返回 null

        • 没有特殊节点，返回 null

      • 有内容，返回 html 类型


  • 对鼠标 mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件进行监听，触发 getSelectContent 函数
  • 在需要的地方进行 debounce 防抖处理
2、简易流程图


2、Debounce 方法实现

2.1. JS
  1. function debounce (fn, time = 500) {
  2.   let timeout = null; // 创建一个标记用来存放定时器的返回值
  3.   return function () {
  4.     clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉
  5.     timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout
  6.       fn.apply(this, arguments)
  7.     }, time)
  8.   }
  9. }
复制代码
2.2. TS
  1. /**
  2. * debounce 函数类型
  3. */
  4. type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
  5. /**
  6. * debounce 防抖函数
  7. * @param {Function} func 函数
  8. * @param {number} wait 等待时间
  9. * @param {false} immediate 是否立即执行
  10. * @returns {DebouncedFunction}
  11. */
  12. function debounce<F extends (...args: any[]) => any>(
  13.   func: F,
  14.   wait = 500,
  15.   immediate = false
  16. ): DebouncedFunction<F> {
  17.   let timeout: ReturnType<typeof setTimeout> | null
  18.   return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
  19.     // eslint-disable-next-line @typescript-eslint/no-this-alias
  20.     const context = this
  21.     const later = function () {
  22.       timeout = null
  23.       if (!immediate) {
  24.         func.apply(context, args)
  25.       }
  26.     }
  27.     const callNow = immediate && !timeout
  28.     if (timeout) {
  29.       clearTimeout(timeout)
  30.     }
  31.     timeout = setTimeout(later, wait)
  32.     if (callNow) {
  33.       func.apply(context, args)
  34.     }
  35.   }
  36. }
复制代码
3、获取选择的文本/html 元素

3.1. 获取文本/html 元素
  1. nterface IGetSelectContentProps {
  2.   type: 'html' | 'text'
  3.   content: string
  4. }
  5. /**
  6. * 获取选择的内容
  7. * @returns {null | IGetSelectContentProps} 返回选择的内容
  8. */
  9. const getSelectContent = (): null | IGetSelectContentProps => {
  10.   const selection = window.getSelection()
  11.   if (selection) {
  12.     // 1. 是焦点在 input 输入框
  13.     // 2. 没有选中
  14.     // 3. 选择的是输入框
  15.     if (selection.isCollapsed) {
  16.       return selection.toString().trim().length
  17.         ? {
  18.             type: 'text',
  19.             content: selection.toString().trim()
  20.           }
  21.         : null
  22.     }
  23.     // 获取选择范围
  24.     const range = selection.getRangeAt(0)
  25.     // 获取选择内容
  26.     const rangeClone = range.cloneContents()
  27.     // 判断选择内容里面有没有节点
  28.     if (rangeClone.childElementCount > 0) {
  29.       // 创建 div 标签
  30.       const container = document.createElement('div')
  31.       // div 标签 append 复制节点
  32.       container.appendChild(rangeClone)
  33.       // 如果复制的内容长度为 0
  34.       if (!selection.toString().trim().length) {
  35.         // 判断是否有选择特殊节点
  36.         const isSpNode = hasSpNode(container)
  37.         return isSpNode
  38.           ? {
  39.               type: 'html',
  40.               content: container.innerHTML
  41.             }
  42.           : null
  43.       }
  44.       return {
  45.         type: 'html',
  46.         content: container.innerHTML
  47.       }
  48.     } else {
  49.       return selection.toString().trim().length
  50.         ? {
  51.             type: 'text',
  52.             content: selection.toString().trim()
  53.           }
  54.         : null
  55.     }
  56.   } else {
  57.     return null
  58.   }
  59. }
  60. /**
  61. * 判断是否包含特殊元素
  62. * @param {Element} parent 父元素
  63. * @returns {boolean} 是否包含特殊元素
  64. */
  65. const hasSpNode = (parent: Element): boolean => {
  66.   const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
  67.   const inpList = ['input', 'textarea', 'select']
  68.   return Array.from(parent.children).some((node) => {
  69.     if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
  70.     if (
  71.       inpList.includes(node.nodeName.toLocaleLowerCase()) &&
  72.       (node as HTMLInputElement).value.trim().length
  73.     )
  74.       return true
  75.     if (node.children) {
  76.       return hasSpNode(node)
  77.     }
  78.     return false
  79.   })
  80. }
复制代码
3.2. 只需要文本
  1. /**
  2. * 获取框选的文案内容
  3. * @returns {string} 返回框选的内容
  4. */
  5. const getSelectTextContent = (): string => {
  6.   const selection = window.getSelection()
  7.   return selection?.toString().trim() || ''
  8. }
复制代码
4、添加事件监听
  1. // 是否时鼠标点击动作
  2. let selectionchangeMouseTrack: boolean = false
  3. const selectionChangeFun = debounce(() => {
  4.   const selectContent = getSelectContent()
  5.   console.log('selectContent', selectContent)
  6.   // todo... 处理上报
  7.   selectionchangeMouseTrack = false
  8. })
  9. // 添加 mousedown 监听事件
  10. document.addEventListener('mousedown', () => {
  11.   selectionchangeMouseTrack = true
  12. })
  13. // 添加 mouseup 监听事件
  14. document.addEventListener(
  15.   'mouseup',
  16.   debounce(() => {
  17.     selectionChangeFun()
  18.   }, 100)
  19. )
  20. // 添加 selectionchange 监听事件
  21. document.addEventListener(
  22.   'selectionchange',
  23.   debounce(() => {
  24.     if (selectionchangeMouseTrack) return
  25.     selectionChangeFun()
  26.   })
  27. )
  28. // 添加 dblclick 监听事件
  29. document.addEventListener('dblclick', () => {
  30.   selectionChangeFun()
  31. })
  32. // 添加 contextmenu 监听事件
  33. document.addEventListener(
  34.   'contextmenu',
  35.   debounce(() => {
  36.     selectionChangeFun()
  37.   })
  38. )
复制代码
也可以进行封装
  1. /**
  2. * addEventlistener function 类型
  3. */
  4. export interface IEventHandlerProps {
  5.   [eventName: string]: EventListenerOrEventListenerObject
  6. }
  8. let selectionchangeMouseTrack: boolean = false
  9. const eventHandlers: IEventHandlerProps = {
  10.   // 鼠标 down 事件
  11.   mousedown: () => {
  12.     selectionchangeMouseTrack = true
  13.   },
  14.   // 鼠标 up 事件
  15.   mouseup: debounce(() => selectionChangeFun(), 100),
  16.   // 选择事件
  17.   selectionchange:  debounce(() => {
  18.     if (selectionchangeMouseTrack) return
  19.     selectionChangeFun()
  20.   }),
  21.   // 双击事件
  22.   dblclick: () => selectionChangeFun(),
  23.   // 右键事件
  24.   contextmenu: debounce(() => selectionChangeFun())
  25. }
  26. Object.keys(eventHandlers).forEach((event) => {
  27.   document.addEventListener(event, eventHandlers[event])
  28. })
复制代码
5、返回内容

5.1. 纯文本内容


5.2. html 格式


6. 完整 JS 代码
  1. function debounce (fn, time = 500) {
  2.   let timeout = null; // 创建一个标记用来存放定时器的返回值
  3.   return function () {
  4.     clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉
  5.     timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout
  6.       fn.apply(this, arguments)
  7.     }, time)
  8.   }
  9. }let selectionchangeMouseTrack = falsedocument.addEventListener('mousedown', (e) => {  selectionchangeMouseTrack = true  console.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) return  selectionChangeFun()}))document.addEventListener('dblclick', (e) => {  console.log('dblclick', e)  selectionChangeFun()})document.addEventListener('contextmenu',debounce(() => {  selectionChangeFun()}))const selectionChangeFun = debounce(() => {  const selectContent = getSelectContent()  selectionchangeMouseTrack = false  console.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 true    if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true    if (node.children) {      return getSpNode(node)    }    return false  })}
复制代码
7. 线上预览

四、总结


  • 鼠标框选上报能监控用户在页面的行为，能为后续的数据分析等提供便利
  • 基于 JS 中的 Selection 和 Range 实现的，使用原生 JS
  • 涉及到的操作比较多，包含键盘、鼠标右键、全选等
  • 能对框选的内容进行分类，区别 html 和 text，更方便的看出用户选择了哪些内容
引用


来源:https://www.cnblogs.com/risheng/p/18207069
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: ECMA 2023(ES14) 新特性

下一篇: 第二周第2天

发表于 2024-5-23 10:25:08 来自手机

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4