JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容

简介: JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。分为以下几点:选择文案时选择图片、svg、iframe、video、audio 等标签时选择 input、select、textarea 等标签时选择 input、textarea 标签内容时选择类似   字符时键盘全选时鼠标右键选择以上各模块结合时当包含标签的时候,返回 html 结构,只有文本时返回文本内容

JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容

一、需求背景

1、项目需求

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

2、需求解析

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

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

简单总结,分为以下几点:

  1. 选择文案时
  2. 选择图片、svgiframevideoaudio 等标签时
  3. 选择 inputselecttextarea 等标签时
  4. 选择inputtextarea 标签内容时
  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:返回完整包含 startContainerendContainer 的最深一级的节点。
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)

一个用户可编辑的元素(例如一个使用 contenteditableHTML 元素,或是在启用了 designModeDocument 的子元素)。

4.3. Selection 的属性

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

  1. anchorNode:选择的起始节点。
  2. anchorOffset:选择开始的 anchorNode 中的偏移量。
  3. focusNode:选择的结束节点。
  4. focusOffset:选择开始处 focusNode 的偏移量。
  5. isCollapsed:如果未选择任何内容(空范围)或不存在,则为 true
  6. rangeCount:选择中的范围数,之前说过,除 Firefox 外,其他浏览器最多为1。
  7. type:类型:NoneCaretRange

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
  • 有选中,则判断内容
  1. 判断选中的内容有没有节点
  • 没有节点,则和没有选中一样处理,进行 toString().trim() 操作,判断内容
  • 有内容,直接返回 text 类型
  • 无内容,返回 null
  • 有节点,进行 toString().trim() 操作,判断内容
  • 没有内容,判断是否有特殊节点
  • 'iframe', 'svg', 'img', 'audio', 'video' 节点,返回 html 类型
  • 'input', 'textarea', 'select',判断 value 值,是否存在
  • 存在:返回 html 类型
  • 不存在:返回 null
  • 没有特殊节点,返回 null
  • 有内容,返回 html 类型
  1. 对鼠标 mousedownmouseup 事件和 selectionchangecontextmenudblclick 事件进行监听,触发 getSelectContent 函数
  2. 在需要的地方进行 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 中的 SelectionRange 实现的,使用原生 JS
  3. 涉及到的操作比较多,包含键盘、鼠标右键、全选等
  4. 能对框选的内容进行分类,区别 htmltext,更方便的看出用户选择了哪些内容

引用

目录
相关文章
|
8天前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
10 0
JS代码动态打印404页面源码
|
14天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
8天前
|
测试技术 UED
断网之后的页面,Autox.js是点击还是上下滑动比较好?
断网之后的页面,Autox.js是点击还是上下滑动比较好?
|
8天前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
11天前
|
编解码
WordPress页面文件添加html后缀名
wordpress 页面默认不能实现伪静态链接,手动在链接中添加 “.html” ,会自动转码为 “-html” ,但万能的 WordPress,你能想到的功能都会有相应的插件帮你实现。
10 0
|
14天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
|
16天前
|
JavaScript 前端开发 UED
【源码分享】简单的404 HTML页面示例,该页面在加载时会等待2秒钟,然后自动重定向到首页
【源码分享】简单的404 HTML页面示例,该页面在加载时会等待2秒钟,然后自动重定向到首页
38 0
|
16天前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
27 0
|
16天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)