Chrome高亮扩展：如何通过window.getSelection获取选中文本完整路径

开发Chrome高亮扩展时，已实现高亮/取消高亮功能，但需要将高亮内容本地存储，因此需为每个高亮项获取完整路径。目前仅能获取高亮所在元素的DOM路径，缺少文本节点的路径信息——比如多个高亮项处于同一父元素<div.max-w-3xl>下时，无法区分各自的唯一路径。

现有高亮实现代码 #

const selection = window.getSelection();
const selectionRange = selection.getRangeAt(0);
const id = nanoid();
const mark = document.createElement("mark");
const selectionIndexes = [
  selectionRange.startOffset,
  selectionRange.endOffset,
];

mark.textContent = selection.toString();
mark.dataset.highlightId = id;
mark.classList.add("highlight");

selectionRange.deleteContents();
selectionRange.insertNode(mark);

console.log(
  getElementPath(selectionRange.commonAncestorContainer as Element),
  selectionIndexes
);

getElementPath函数实现 #

const getElementPath = (element): string => {
  let nodeName = element.nodeName.toLowerCase();
  if (element === document.body) return "body";
  if (element.id) nodeName += "#" + element.id;
  else if (element.classList.length)
    nodeName += "." + [...element.classList].join(".");
  return getElementPath(element.parentNode) + " " + nodeName;
};

当前日志输出 #

body div.bg-base-100.drawer.drawer-mobile div.drawer-content div.px-6.xl:pr-2.pb-16 div.flex.flex-col-reverse.justify-between.gap-6.xl:flex-row div.prose.w-full.max-w-4xl.flex-grow div.max-w-3xl (2) [8, 10]

要生成唯一的高亮路径，需要在现有元素路径基础上，补充文本节点的索引和选中偏移量，具体操作如下：

1. 处理文本节点容器 #

selectionRange.commonAncestorContainer可能是文本节点（nodeType === 3），需要先定位到它的父元素，同时记录该文本节点在父元素子节点中的位置索引。

2. 新增文本节点索引的路径标识 #

修改路径生成逻辑，当存在文本节点时，在元素路径末尾追加:text(n)标识（n为文本节点在父元素子节点中的序号，从0开始）。

3. 完整路径生成函数示例 #

const getFullHighlightPath = (range) => {
  let container = range.commonAncestorContainer;
  let textNodeIndex = -1;
  // 识别文本节点并记录其在父元素中的索引
  if (container.nodeType === Node.TEXT_NODE) {
    const parent = container.parentNode;
    textNodeIndex = Array.from(parent.childNodes).indexOf(container);
    container = parent;
  }
  // 获取原有元素路径
  const elementPath = getElementPath(container);
  // 拼接文本节点标识（如果有）
  return textNodeIndex !== -1 
    ? `${elementPath}:text(${textNodeIndex})` 
    : elementPath;
};

// 替换原日志输出逻辑
console.log(
  getFullHighlightPath(selectionRange),
  selectionIndexes
);

4. 区分同一父元素下的多个高亮 #

现在即使多个高亮在同一个父元素下，也能通过路径和偏移量唯一区分：

• 不同文本节点的高亮：路径会带上不同的:text(n)标识，比如body ... div.max-w-3xl:text(0)和body ... div.max-w-3xl:text(1)
• 同一文本节点内的高亮：路径相同，但selectionIndexes的起止偏移量不同

5. 本地存储的完整标识 #

存储每个高亮项时，保存以下信息即可后续精准还原：

• 完整路径（元素路径+文本节点索引）
• 选中起止偏移量selectionIndexes
• 高亮ID和自定义样式

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