JavaScript中根据字符串索引获取DOM路径：一种高级解析策略

/**
 * 根据HTML字符串和指定索引获取DOM路径
 * @param {string} str 原始HTML字符串
 * @param {number} position 目标索引位置
 * @returns {string|undefined} DOM路径，例如 "html > body > h1"，如果未找到则为 undefined
 */
const getSelector = (str, position) => {
  // 判断指定位置后第一个非空白字符是否是 '<'，
  // 从而推断该位置是否在标签外部的文本内容中
  const startsOutsideTag = /^[^<>]*</.test(str.slice(position));

  let changedStr;
  if (startsOutsideTag) {
    // 如果在标签外部，直接插入一个空格
    changedStr = str.slice(0, position) + ' ' + str.slice(position);
  } else {
    // 如果在标签内部或紧邻标签，找到下一个 '>' 并在其后插入空格
    // 这样可以确保插入的空格成为一个可识别的文本节点
    changedStr = str.slice(0, position) + str.slice(position).replace('>', '> ');
  }

  // ... 后续步骤将在此处继续 ...
};

/**
 * 将HTML字符串解析为DOM文档并提取所有文本节点
 * @param {string} htmlString HTML字符串
 * @returns {[Document, Text[]]} 包含DOM文档和文本节点数组的元组
 */
const getDocAndTextNodes = (htmlString) => {
  const doc = new DOMParser().parseFromString(htmlString, 'text/html');
  // 使用 TreeWalker 遍历DOM树并只显示文本节点
  const walker = document.createTreeWalker(
    doc,
    NodeFilter.SHOW_TEXT,
    null, // 过滤器函数，null表示接受所有文本节点
    false // historical argument, ignored
  );

  let node;
  const textNodes = [];
  while((node = walker.nextNode())) {
    textNodes.push(node);
  }
  return [doc, textNodes];
};

// ... 在 getSelector 函数内部 ...
  const [originalDoc, originalNodes] = getDocAndTextNodes(str);
  const [changedDoc, changedNodes] = getDocAndTextNodes(changedStr);

  for (let i = 0; i < originalNodes.length; i++) {
    // 找到第一个文本内容不匹配的节点
    if (originalNodes[i].nodeValue !== changedNodes[i].nodeValue) {
      // 找到后，调用 getAncestorNames 获取其祖先路径
      return getAncestorNames(originalNodes[i]);
    }
  }
  return undefined; // 如果没有找到变化的节点
// ...

/**
 * 获取给定DOM节点的祖先元素标签名路径
 * @param {Node} node 目标DOM节点
 * @returns {string} 祖先路径字符串，例如 "html > body > h1"
 */
const getAncestorNames = (node) => {
  let ancestorNames = [];
  // 循环向上追溯父元素
  while (node = node.parentElement) {
    ancestorNames.push(node.tagName);
  }
  // 反转数组并用 ' > ' 连接，转换为小写
  return ancestor