如何使用Xpath或CSS选择器获取第一个h3标签之前的所有p标签

1. XPath方案（仅提取p标签） #

你之前写的XPath //span[@id="description"]/h3[1]/preceding-sibling::p 本身语法是正确的，它会匹配所有位于第一个h3标签之前的同级p标签，返回结果是节点集合而非单个节点。如果你只拿到了第一个p，大概率是你的解析器调用逻辑只取了集合的第一个元素，调整取值逻辑即可拿到全部符合要求的p标签。

如果需要匹配第N个和第N+1个h3之间的所有节点，可以参考如下通用写法：

//span[@id="description"]/h3[N]/preceding-sibling::*[preceding-sibling::h3[N-1]]

把上面的N替换成对应的序号即可提取对应区间的节点。

2. jQuery方案（支持全内容拆分，可处理文本节点） #

如果需要完整按h3拆分所有内容（包括文本节点、其他标签），可以直接遍历所有子节点拆分，代码如下：

const $content = $('#description').contents();
// 存储拆分后的分段数据
const sections = [];
let currentSection = {
    title: '', // h3标题
    content: [] // 对应分段的所有节点
};

$content.each(function () {
    // 遇到h3标签就开启新分段
    if (this.tagName === 'H3') {
        if (currentSection.title || currentSection.content.length) {
            sections.push(currentSection);
        }
        currentSection = {
            title: $(this).text().trim(),
            content: []
        };
    } else {
        // 非h3标签存入当前分段的内容
        currentSection.content.push(this);
    }
});
// 把最后一个分段存入数组
sections.push(currentSection);

拆分后sections数组的第一个元素的content就是第一个h3之前的所有内容，后续每个元素对应一个h3标题下的所有内容，完美解决无法获取文本节点的问题。

如果仅需要提取第一个h3之前的所有内容，可以用更简单的写法：

const $desc = $('#description').clone();
// 直接删除第一个h3以及它之后的所有内容
$desc.find('h3:first').nextAll().addBack().remove();
// 直接获取剩余内容的HTML
const result = $desc.html().trim();

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