JS实现矩形区域跨多文本元素的自定义文本选择

前置配置 #

首先全局禁用原生文本选择能力，避免和自定义逻辑冲突：

* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

同时在touch事件回调里调用e.preventDefault()阻止原生选择、长按弹出菜单的默认行为。

之前方案失效原因 #

你之前用绝对定位元素作为Range起止锚点的方案无法生效，核心原因是Range的起止节点必须是文档正常流内的文本节点/元素节点，且需要指定对应节点内的偏移量。脱离正常文本流的空绝对定位元素不属于文本流组成部分，浏览器无法计算它和相邻文本的位置映射关系，自然无法生成有效选区。

具体实现逻辑 #

核心直接使用浏览器提供的坐标转光标位置API，不需要插入任何额外的占位元素：

• 坐标预处理
  拿到touch事件的clientX/clientY后，先计算矩形选区的真实边界，兼容反向拖拽的场景：

  const rect = {
    left: Math.min(touchStartX, touchEndX),
    right: Math.max(touchStartX, touchEndX),
    top: Math.min(touchStartY, touchEndY),
    bottom: Math.max(touchStartY, touchEndY)
  }
  

• 坐标转文本光标位置
  封装兼容方法，直接从坐标拿到对应位置的文本光标Range，不需要额外占位元素：

  function getCaretRangeFromPoint(x, y) {
    // Webkit内核（移动端大部分浏览器、Chrome、Safari）
    if (document.caretRangeFromPoint) {
      return document.caretRangeFromPoint(x, y)
    }
    // 标准W3C API兼容
    const caretInfo = document.caretPositionFromPoint(x, y)
    if (!caretInfo) return null
    const tempRange = document.createRange()
    tempRange.setStart(caretInfo.offsetNode, caretInfo.offset)
    tempRange.collapse(true)
    return tempRange
  }
  
  // 拿到选区起点（左上角）、终点（右下角）对应的光标位置
  const startCaret = getCaretRangeFromPoint(rect.left, rect.top)
  const endCaret = getCaretRangeFromPoint(rect.right, rect.bottom)
  

• 过滤选区范围内的有效文本节点
  用TreeWalker高效遍历DOM，筛掉不在矩形范围内、隐藏元素、脚本/样式标签内的无效文本：

  const textWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode(node) {
        const parent = node.parentElement
        // 过滤无父元素、隐藏元素内的文本
        if (!parent || parent.offsetParent === null) return NodeFilter.FILTER_REJECT
        const parentRect = parent.getBoundingClientRect()
        // 快速过滤完全不在选区内的节点
        if (
          parentRect.right < rect.left ||
          parentRect.left > rect.right ||
          parentRect.bottom < rect.top ||
          parentRect.top > rect.bottom
        ) return NodeFilter.FILTER_REJECT
        return NodeFilter.FILTER_ACCEPT
      }
    }
  )
  

• 生成最终选区
  对比起点和终点光标在文本流中的先后顺序，创建完整Range后加入Selection对象即可：

  if (startCaret && endCaret) {
    const selectRange = document.createRange()
    // 对比两个光标的位置，保证start在文本流中更早的位置
    if (startCaret.compareBoundaryPoints(Range.START_TO_END, endCaret) < 0) {
      selectRange.setStart(startCaret.startContainer, startCaret.startOffset)
      selectRange.setEnd(endCaret.startContainer, endCaret.startOffset)
    } else {
      selectRange.setStart(endCaret.startContainer, endCaret.startOffset)
      selectRange.setEnd(startCaret.startContainer, startCaret.startOffset)
    }
    // 清空原有选区，加入新生成的选区
    const selection = window.getSelection()
    selection.removeAllRanges()
    selection.addRange(selectRange)
  }
  

  如果需要实现多列布局下的块级非连续文本选择，可以遍历所有筛选出的文本节点，逐段判断每个字符的矩形是否落在选区内，为每个命中的文本段创建单独的Range加入Selection即可。

优化注意点 #

• touchmove过程中做节流处理，每16ms计算一次选区即可，避免频繁触发重绘卡顿
• 可以通过::selection伪元素自定义选中文本的样式，完全替换原生选中效果
• 如果需要支持滚动区域内的选择，直接用touch事件的clientX/clientY即可，上述API本身就是基于视口坐标系，不需要额外做滚动偏移转换

内容的提问来源于stack exchange，提问作者exoRift