如何获取span/div中被选中的文本位置并实现选中内容高亮

核心逻辑 #

优先使用浏览器原生的Selection和RangeAPI实现，不需要手动计算文本在节点内的偏移，天然支持同节点选中、跨节点选中场景，兼容性好、性能最优，不会破坏原有DOM结构。

具体实现步骤 #

• 第一步：获取选中的有效范围
  首先校验用户选中内容是否合法、且在你的内容容器范围内：

// 替换为你的内容父容器ID
const contentWrapper = document.getElementById('content-wrapper')
const selection = window.getSelection()
// 无选中内容/选中内容为空直接返回
if (selection.rangeCount === 0 || selection.isCollapsed) return
const selectRange = selection.getRangeAt(0)
// 校验选中范围是否在目标容器内，避免处理容器外的选中内容
if (!contentWrapper.contains(selectRange.commonAncestorContainer)) return

• 第二步：高亮选中内容
  提供两种可选实现，根据业务需求选择即可：

方案1：极简原生命令实现（推荐快速开发） #

浏览器原生命令自动处理跨节点、重叠选中的兼容问题，代码量最少：

// 第二个参数为高亮颜色，可自定义
document.execCommand('hiliteColor', false, '#fff3cd')
// 高亮完成后清除选中状态
selection.removeAllRanges()

方案2：自定义标签实现（推荐需要统一管理高亮的场景） #

如果需要给高亮加自定义属性、后续批量删除高亮，可手动用语义化<mark>标签包裹选中内容：

function wrapHighlight(range, highlightClass = 'custom-highlight') {
  // 收集选中范围内的所有文本节点
  const textNodes = []
  const iterator = document.createNodeIterator(
    range.commonAncestorContainer,
    NodeFilter.SHOW_TEXT,
    node => range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
  )
  let current = iterator.nextNode()
  while (current) {
    textNodes.push(current)
    current = iterator.nextNode()
  }

  // 逐个文本节点包裹高亮标签
  textNodes.forEach((node, idx) => {
    const nodeRange = document.createRange()
    // 第一个节点从选中起始位置开始
    idx === 0 ? nodeRange.setStart(range.startContainer, range.startOffset) : nodeRange.setStart(node, 0)
    // 最后一个节点到选中结束位置结束
    idx === textNodes.length -1 ? nodeRange.setEnd(range.endContainer, range.endOffset) : nodeRange.setEnd(node, node.length)
    const mark = document.createElement('mark')
    mark.className = highlightClass
    nodeRange.surroundContents(mark)
  })
  selection.removeAllRanges()
}

// 调用方法
wrapHighlight(selectRange)

配套自定义样式：

.custom-highlight {
  background-color: #fff3cd;
  color: #1a1a1a;
  padding: 0 2px;
}

场景适配说明 #

• 同节点选中（例：选中第一个span内的第一个/第二个abc）：API可直接识别选中内容的起始、结束偏移量，精准包裹对应文本
• 跨节点选中（例：同时选中第一个span和第二个div内的abc）：自动拆分多个节点的选中范围，分别包裹高亮标签，不破坏原有DOM结构

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