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

一、需求背景

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 主要也是用在事件监听和事件处理上。

2、addEventListener

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

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

3、Range

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

Range 是浏览器原生的对象。

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 2

  range.setStartBefore(liDoms[1]);

  // Range 结束位置在 li 3

  range.setEndAfter(liDoms[2]);

  // 获取 selection 对象

  const selection = window.getSelection();

  // 添加光标选择的范围

  selection.addRange(range);

</script>

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

3.1.1 浏览器兼容情况

3.2. Range 属性

  1. startContainer：起始节点。

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

  3. endContainer：结束节点。

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

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

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

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

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

只选择 li 中的 itePres

可以看出 range 属性对应的值

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 兼容性

4、Selection

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

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

  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 兼容性

三、项目实现

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、简易流程图

2、Debounce 方法实现

2.1. JS

function debounce (fn, time = 500) {

  let timeout = null; // 创建一个标记用来存放定时器的返回值

  return function () {

    clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉

    timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout

      fn.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> | null

  return function (this: ThisParameterType<F>, ...args: Parameters<F>) {

    // eslint-disable-next-line @typescript-eslint/no-this-alias

    const context = this

    const later = function () {

      timeout = null

      if (!immediate) {

        func.apply(context, args)

      }

    }

    const callNow = immediate && !timeout

    if (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)

      // 如果复制的内容长度为 0

      if (!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 true

    if (

      inpList.includes(node.nodeName.toLocaleLowerCase()) &&

      (node as HTMLInputElement).value.trim().length

    )

      return true

    if (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) return

    selectionChangeFun()

  })

)

// 添加 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) return

    selectionChangeFun()

  }),

  // 双击事件

  dblclick: () => selectionChangeFun(),

  // 右键事件

  contextmenu: debounce(() => selectionChangeFun())

}

Object.keys(eventHandlers).forEach((event) => {

  document.addEventListener(event, eventHandlers[event])

})

5、返回内容

5.1. 纯文本内容

5.2. html 格式

6. 完整 JS 代码

function debounce (fn, time = 500) {

  let timeout = null; // 创建一个标记用来存放定时器的返回值

  return function () {

    clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉

    timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout

      fn.apply(this, arguments)

    }, time)

  }

}

let selectionchangeMouseTrack = false

document.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. 线上预览

四、总结

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

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

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

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

引用

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

  1. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  2. ListView鼠标框选实现蓝色蒙板

    此问题留心已久,今日方悉心求之,记录心得. ListView控件,不论Delphi中的TListView还是c#中的ListView,在开启其MultiSelect属性时,鼠标框选只是显示框张,如下图 ...

  3. 原生js实现在表格用鼠标框选并有反选功能

    今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...

  4. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  5. iOS UItextView监听输入特定字符跳转页面选择选项返回

    今天有朋友问我一个需求的实现,于是自己写了一个Demo简单的实现了一下: 需求是: 1>比如: 检测用户输入"A"字符串,跳转页面选择选项,将选择的选项放置textView里 ...

  6. js实现浮动框跟随页面滚动，最后停留在原来位置

    左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; m ...

  7. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  8. js控制 input框中输入数字时，累计求和

    $('.cc input').bind('input propertychange', function(){ var total = 0; $("input").each(fun ...

  9. vue 浏览器页面刷新时执行一段代码

    当刷新(浏览器刷新)页面的时候,重置到首页(或其他页面)纯js的是window.onload()但是vue几乎不会用到这个,vue所有的是生命周期那么我们可以根据生命周期来实现这个beforeCrea ...

  10. 使用themeleaf页面技术时，在JavaScript代码中使用for循环报错.....

    解决方法: 在for循环前加上/* <![CDATA[ */,在for循环后加/* ]]> */,这样就能正常解析了:如下 /* <![CDATA[ */ for (var i = ...

随机推荐

  1. UJCMS 9.1.0 发布，国内开源 java cms

    许可协议从GPL-2改为Apache-2.0,更宽松的协议,方便用户将系统集成到自身的应用中. 修复了已知bug,系统更加稳定. 升级日志(9.1.0) 修复前台全文搜索没有结果 web.xml se ...

  2. HarmonyOS Codelab 优秀样例——购物应用，体验一次开发多端部署魅力

    一. 样例介绍 本篇Codelab基于自适应布局和响应式布局,实现购物应用在手机.折叠屏.平板不同屏幕尺寸设备上按不同设计显示.通过三层工程结构组织代码,实现一次开发,多端部署 . 手机运行效果如图所 ...

  3. 力扣392(java)-判断子序列（简单）

    题目: 给定字符串 s 和 t ,判断 s 是否为 t 的子序列. 字符串的一个子序列是原始字符串删除一些(也可以不删除)字符而不改变剩余字符相对位置形成的新字符串.(例如,"ace&quo ...

  4. 龙湖千丁基于 ACK@Edge 的云原生智慧停车系统架构实践

    简介: 结合龙湖千丁自研的新版停车云系统以及 ACK@Edge 提供的标准 Kubernetes 服务以及云边一体化协同解决方案,整体来着,边缘部署时间成本由 1 天缩短到 3 小时,将之前的手动升级 ...

  5. Linux系统诊断-内存基础

    简介: Linux系统诊断-内存基础 1. 背景 谈及linux内存,很多时候,我们会关注free,top等基础命令.当系统遇到异常情况时,内存问题的根因追溯,现场诊断时,缺乏深层次的debug能力. ...

  6. Java异步非阻塞编程的几种方式

    简介: Java异步非阻塞编程的几种方式 一. 从一个同步的Http调用说起 一个很简单的业务逻辑,其他后端服务提供了一个接口,我们需要通过接口调用,获取到响应的数据. 逆地理接口:通过经纬度获取这个 ...

  7. 基于 EventBridge 构建 SaaS 应用集成方案

    ​简介:事件源是事件驱动的基石,如何获取更多事件源也是 EventBridge 一直在探索和尝试的方向.针对市场上其他云厂商和垂直领域的 Saas 服务,EventBridge 发布了 HTTP So ...

  8. SchedulerX 如何帮助用户解决分布式任务调度难题？

    ​简介:本文分别对任务调度平台的资源定义.可视化管控能力.分布式批处理能力进行了简述,并基于 SchedulerX 的能力结合实际业务场景提供了一些基础参考案例.希望通过上述内容能让大家方便地熟悉任务 ...

  9. 云上安全保护伞--SLS威胁情报集成实战

    简介: 威胁情报是某种基于证据的知识,包括上下文.机制.标示.含义和能够执行的建议. 什么是威胁情报 根据Gartner对威胁情报的定义,威胁情报是某种基于证据的知识,包括上下文.机制.标示.含义和能 ...

  10. ARMS企业级场景被集成场景介绍

    简介: ARMS企业级场景被集成场景介绍 通过本次最佳实践内容,您可以看到ARMS OpenAPI可以灵活的被集成到客户链路监控场景,并对其进行可视化图形展示监控信息. 1. 背景信息 应用实时监控服 ...