如何使用Cheerio获取DOM节点的唯一CSS选择器

用cheerio生成节点唯一CSS选择器的核心逻辑按优先级处理：

• 若节点存在id属性，直接返回#id值作为选择器，id全局唯一，是最短的定位路径
• 无id的节点，从当前节点向上逐层回溯到根节点，每层拼接「标签名+类名+同层级位置标识」，最终用>连接成完整父子选择器路径，保证全局唯一。

• 安装依赖：
  npm install cheerio
• 核心实现代码：

const cheerio = require('cheerio');

/**
 * 为cheerio节点生成唯一CSS选择器
 * @param {cheerio.Cheerio} $el 目标cheerio节点
 * @param {cheerio.CheerioAPI} $ cheerio实例
 * @returns {string} 唯一CSS选择器
 */
function getUniqueSelector($el, $) {
  // 存在id直接返回，id全局唯一无需拼接父路径
  const id = $el.attr('id');
  if (id) {
    return `#${id}`;
  }

  const pathSegs = [];
  let currentNode = $el;

  // 向上遍历直到html根节点停止
  while (currentNode.length && currentNode[0].tagName !== 'html') {
    const tagName = currentNode[0].tagName.toLowerCase();
    let seg = tagName;

    // 拼接首个有效类名，缩短选择器长度
    const classVal = currentNode.attr('class');
    if (classVal) {
      const firstClass = classVal.trim().split(/\s+/)[0];
      seg += `.${firstClass}`;
    }

    // 计算节点在同级同类标签中的位置
    const parentNode = currentNode.parent();
    const sameTagSiblings = parentNode.children(seg);
    if (sameTagSiblings.length > 1) {
      const pos = sameTagSiblings.index(currentNode) + 1;
      seg += `:nth-child(${pos})`;
    } else {
      seg += ':first-child';
    }

    pathSegs.unshift(seg);
    currentNode = parentNode;
  }

  // 补全根路径body
  pathSegs.unshift('body');
  return pathSegs.join(' > ');
}

// 测试用例
const testHtml = `
<html>
  <body>
    <div class="my-class">
      <div id="my-id">lorem with id</div>
    </div>
    <div class="my-class">
      <div>lorem ipsum</div>
    </div>
  </body>
</html>
`;

const $ = cheerio.load(testHtml);

// 验证两个目标节点
const idNode = $('div:contains("lorem with id")').first();
console.log('lorem with id对应选择器：', getUniqueSelector(idNode, $)); // 输出 #my-id

const textNode = $('div:contains("lorem ipsum")').first();
console.log('lorem ipsum对应选择器：', getUniqueSelector(textNode, $)); // 输出 body > div.my-class:nth-child(2) > div:first-child

• 内容为lorem with id的节点携带id，直接返回#my-id，完全匹配预期
• 内容为lorem ipsum的节点无id，逐层计算位置后生成的选择器可唯一定位节点，如果需要对齐示例里的nth-child计数规则，调整同级位置计算时忽略空白文本节点的计数即可。

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