教你用纯JS实现语雀的划词高亮功能

const {
  startContainer, // 起始节点
  startOffset, // 起始节点偏移量
  endContainer, // 终止节点
  endOffset // 终止节点偏移量
} = document.getSelection().getRangeAt(0)

// 创建一个 range 对象
const range = document.createRange()
// 设置需要获取位置信息的文本节点以及偏移量
range.setStart(startContainer, startOffset)
range.setEnd(startContainer, startContainer.textContent.length)
// 通过 getBoundinGClientRect 获取位置信息
const rect = range.getBoundingClientRect()

// 获取 start 到 end 深度优先遍历之间的所有 Text node 节点
function getTextNodesByDfs(start: Text, end: Text) {
  if (start === end) return []
  const iterator = nodeDfsGenerator(start, false)
  const textNodes: Text[] = []
  iterator.next()
  let value = iterator.next().value
  while (value && value !== end) {
    if (node.nodeType === 3) {
      textNodes.push(value)
    }
    value = iterator.next().value
  }
  if (!value) {
    return []
  }
  return textNodes
}

// 返回节点的深度优先迭代器
// 对于有子节点的 Node 会遍历到两次，不过 Text Node 肯定没有子节点，所以不会重复统计到
function * nodeDfsGenerator(node: Node, isGoBack = false): Generator<Node, void, Node> {
  yield node
  // isGoBack 用于判断是否属于子节点遍历结束回退到父节点，如果是那么该节点不再遍历其子节点
  if (!isGoBack && node.childNodes.length > 0) {
    yield * nodeDfsGenerator(node.childNodes[0], false)
  } else if (node.nextSibling) {
    yield * nodeDfsGenerator(node.nextSibling, false)
  } else if (node.parentNode) {
    yield * nodeDfsGenerator(node.parentNode, true)
  }
}

// 将一个跨行的 range 切割为多个不跨行的 range
function splitRange(node: Text, startOffset: number, endOffset: number): Range[] {
  const range = document.createRange()
  const rowTop = getCharTop(node, startOffset)
  // 字符数小于两个不用判断是否跨行
  // 头尾高度一致说明在同一行
  if ((endOffset - startOffset < 2) || rowTop === getCharTop(node, endOffset - 1)) {
    range.setStart(node, startOffset)
    range.setEnd(node, endOffset)
    return [range]
  } else {
    const last = findRowLastChar(rowTop, node, startOffset, endOffset - 1)
    range.setStart(node, startOffset)
    range.setEnd(node, last + 1)
    const others = splitRange(node, last + 1, endOffset)
    return [range, ...others]
  }
}

// 二分法找到 range 某一行的最右字符
function findRowLastChar(top: number, node: Text, start: number, end: number): number {
  if (end - start === 1) {
    return getCharTop(node, end) === top ? end : start
  }
  const mid = (end + start) >> 1
  return getCharTop(node, mid) === top
    ? findRowLastChar(top, node, mid, end)
    : findRowLastChar(top, node, start, mid)
}

// 获取 range 某个字符位置的 top 值
function getCharTop(node: Text, offset: number) {
  return getCharRect(node, offset).top
}

// 获取 range 某个字符位置的 DOMRect
function getCharRect(node: Text, offset: number) {
  const range = document.createRange()
  range.setStart(node, offset)
  range.setEnd(node, offset + 1 > node.textContent!.length ? offset : offset + 1)
  return range.getBoundingClientRect()
}

// 获取从文本容器到文本节点的路径信息，用于存储
function getPath(textNode: Text) {
  const path = [0]
  let parentNode = textNode.parentNode
  let cur: Node = textNode
  while (parentNode) {
    if (cur === parentNode.firstChild) {
      // this.root 为文本容器
      if (parentNode === this.root) {
        break
      } else {
        cur = parentNode
        parentNode = cur.parentNode
        path.unshift(0)
      }
    } else {
      cur = cur.previousSibling!
      path[0]++
    }
  }
  return parentNode ? path : null
}

// 根据路径信息获取文本节点，用于返显
getNodeByPath(path: number[]) {
  // this.root 为文本容器
  let node: Node = this.root
  for (let i = 0; i < path.length; i++) {
    if (node && node.childNodes && node.childNodes[path[i]]) {
      node = node.childNodes[path[i]]
    } else {
      return null
    }
  }
  return node
}