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

于 2024-05-23 10:15:13 发布
阅读量1.6k 收藏 23
点赞数 24
分类专栏： 前端 js javascript 文章标签： javascript 计算机外设 html selection range typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqiankunmiss/article/details/139140373
版权
javascript 同时被 3 个专栏收录
67 篇文章 2 订阅
订阅专栏
js
55 篇文章 0 订阅
订阅专栏
前端
43 篇文章 0 订阅
订阅专栏

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

2、addEventListener

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

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

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 2
  range.setStartBefore(liDoms[1]);
  // Range 结束位置在 li 3
  range.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

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

三、项目实现

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(() => { // 创建一个新的 定时器，并赋值给 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. 纯文本内容

image

5.2. html 格式

image

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，更方便的看出用户选择了哪些内容

引用

JavaScript实现鼠标点击页面弹出文字效果(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-04 388
JavaScript实现鼠标点击页面弹出文字效果(附完整源码)
JS实现鼠标框选效果完整实例
10-22
主要介绍了JS实现鼠标框选效果,可实现鼠标点击出现框选效果的功能,同时下方实时显示框选大小,涉及javascript鼠标事件的响应与页面元素的动态运算技巧,需要的朋友可以参考下
js鼠标框选元素
weixin_54754781的博客
07-24 855
js实现框选多个元素的实用方法
获取鼠标选择的文本内容之JavaScript代码
weixin_30914981的博客
07-27 87
想研究划词翻译玩意, 做个演示Demo,其中无非就是使用到Ajax, 但主要问题是如何获取到用户划取得内容,然后发送给服务器翻译, 显示返回结果.其中获取鼠标划取文本内容的JavaScript如下:<script type="text/javascript">function getSelectText(){ var txt = null; if (window.getSelecti...
js 获取 鼠标选中的文字
最新发布
rojie0的博客
07-27 1251
js 获取 鼠标选中的文字。
Vue实现鼠标经过文字显示悬浮框效果的示例代码
10-14
在Vue框架中，实现鼠标经过文字时显示悬浮框效果，是一种常见的增强用户交互体验的方式。在Web开发中，这样的功能可以用于提供额外的提示信息，帮助用户更好地理解页面上的元素。以下是一个详细的步骤来实现这一功能...
vue实现多组关键词对应高亮显示功能
12-09
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在这个示例中，我们将讨论如何在Vue应用中实现多组关键词的高亮显示功能。这个功能通常用于搜索结果展示或者文本分析，使得用户能够快速识别出关键信息。...
利用HTML5，无JS实现各种交互效果
大前端
07-16 2262
本文利用的是HTML5 details, summary 首先 一、了解HTML5 details, summary默认交互行为 <details>标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML： <details> <summary>这是摘要1</summary> <p>这里...
按住滑块 拖拽验证html5,【原生】JavaScript 实现滑动拖动验证
weixin_39884100的博客
06-21 1680
通常，我们为了防止用户恶意提交表单，会让用户在提交前完成滑动拖动验证，有时候这也能起到一丝反爬的作用。实现滑动验证的方式当然不止一种，这里我们直接使用原生 JavaScript 来实现。现在，你可以在 这里 看到完整的源码，欢迎 Star 哦????。原生实现原生 JavaScript 的实现，主要是通过监听鼠标事件来对 DOM 进行一系列的操作。滑块验证的结构主要分为四个部分：轨道、滑块、背景和文案，...
js获取鼠标选中的文字
Cool的博客
01-02 5649
定义需要获取的内容的节点： <span onClick="SelectText()">河中鱼类离奇死亡，下游居民频染怪病， 沿岸植物不断变异，是残留农药？还是生化攻击？》</span> 获取选中的文字，我们使用window.getSelection().toString()方法。 代码如下： function SelectText() { try{ ...
JS获取鼠标选中的文字
01-21
js获取鼠标选中的文字代码如下所示： <html> <head> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>js获取鼠标选中的文字</title> [removed] <!-- function SelectText() { try{ var selecter=window.getSelection(); if(selecter!=null&&selecter.trim()!=){ alert(selecter);} }
获取鼠标选中的文字 JS
lurenmei的专栏
11-08 666
选中文字自动加入到文本框 站长学院www.pigzz.com <!-- Begin var text = ""; function getActiveText(e) { text = (document.all) ? document.selection.createRange().text : document.get
JavaScript 创建元素的三种方式
流楚丶格念的博客
08-19 4350
文章目录创建元素的三种方式document.write()innerHTMLdocument.createElement()性能问题案例动态创建列表，高亮显示根据数据动态创建表格 创建元素的三种方式 document.write() document.write('新设置的内容<p>标签也可以生成</p>'); document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉= <!DOCTYPE htm
前端搭建打字通游戏（内附源码）
热门推荐
官方推荐
04-03 1万+
通过前端基础技术实现一个打字通并计算成绩
js方法返回html字符串,JavaScript中20个常用的字符串处理方法
weixin_28864167的博客
06-17 869
JavaScript字符串方法帮助您处理字符串。javascript字符串相关的方法有很多，本文为大家介绍了20个常用的字符串方法，希望对大家有一定的帮助。1、charAt(x)charAt(x)返回字符串中x位置的字符，下标从 0 开始。//charAt(x)var myString = 'jQuery FTW!!!';console.log(myString.charAt(7));//outp...
JS获取页面里鼠标选中的文字
12-09 3172
效果图：代码： 无标题文档<!--function getWords(){ var text; if(navigator.appName=="Microsoft Internet Explorer"){ text=document.selection.createRange().text; }else{ text=window.getSelect
javascript鼠标获取选中的文字
那谁家的博客
05-28 539
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body&g...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gqkmiss

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值