本文介绍如何通过组合xpath表达式，一次性匹配两种不同html结构中的运费文本节点，避免重复逻辑，提升网页数据提取的鲁棒性与简洁性。
本文介绍如何通过组合xpath表达式，一次性匹配两种不同html结构中的运费文本节点，避免重复逻辑，提升网页数据提取的鲁棒性与简洁性。
在实际网页爬虫或自动化数据提取任务中，目标页面常因版本迭代、A/B测试或多平台适配等原因存在结构差异。例如，从电商商品页提取“运费”信息时，可能遇到两类HTML结构：
- 类型一：运费位于 <div class="flex flex-row justify-between f6 mid-gray pt2"> 容器内，具体为该容器下第二个 <div> 的文本（如 //div[2]/text()）；
- 类型二：运费位于 <div class="mid-gray flex items-center"> 容器内，嵌套在 <span> 标签中（如 //span/text()）。
若分别编写两套提取逻辑并依次尝试，代码冗余且可维护性差。更优雅的方案是使用XPath的联合选择（Union Operator |）构建统一表达式。
✅ 推荐XPath表达式如下：
(//*[@class="flex flex-row justify-between f6 mid-gray pt2"]/div[@class="green"] | //*[@class="mid-gray flex items-center"]/span)[1]/text()
? 表达式解析：
立即学习“前端免费学习笔记（深入）”；
- (... | ...)：XPath中 | 表示节点集并集，将两个路径结果合并为一个节点集合；
- [1]：取合并后节点集中的第一个匹配项（即优先返回类型一的结果，若无则返回类型二；注意：XPath 1.0 中 | 不保证顺序，但 [1] 确保只取首个有效匹配，实践中通常按文档顺序返回）；
- /text()：精确提取文本内容，避免获取空白符或子节点干扰；
- 补充说明：原问题中 //div[2] 隐含位置依赖，易受DOM变动影响；而改用 div[@class="green"]（假设运费值有唯一标识类名）更具语义稳定性——建议优先依据语义化class（如 "green" 表示运费金额）而非位置索引定位。
⚠️ 注意事项：
- XPath 1.0（主流解析器如 lxml、Selenium 默认支持）中，| 运算符返回的是去重后的节点集，节点顺序遵循源文档顺序，因此 [1] 实际取的是文档中最早出现的匹配节点，天然具备“兜底”效果；
- 若两类结构可能同时存在且需全部提取，请移除 [1] 并遍历整个节点集；
- 建议配合 normalize-space() 函数清理首尾空格与换行：
(//*[@class="flex flex-row justify-between f6 mid-gray pt2"]/div[@class="green"] | //*[@class="mid-gray flex items-center"]/span)[1]/normalize-space(text())
? 总结：通过联合XPath + 语义化定位 + 文本标准化，一条表达式即可稳健应对多版本HTML结构，显著提升数据提取模块的健壮性与可维护性。
