如何使用XPath查找嵌套元素与属性并提取属性内嵌目标数值

目标场景 #

需要从如下div元素的data-content属性中，提取内嵌<i>标签里的数值15：

<div style="width: 15%" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" role="button" data-original-title="" title="" data-content="<i>15%</i><b>Web Design</b>" class="grid custom_popover"></div>

其中data-content的属性值是字符串格式的HTML片段：<i>15%</i><b>Web Design</b>

具体写法 #

首先要明确：属性里存的HTML片段是纯文本，不会被浏览器/解析器识别为真实DOM节点，没法直接用XPath路径选到内部的<i>标签，要分场景处理：

• 如果你用的是支持XPath 3.0的解析环境（比如Saxon、Chrome DevTools的XPath调试），可以直接在XPath里用正则匹配提取数字，单条表达式就能搞定：

  replace(//div[contains(@class,'custom_popover')]/@data-content, '^.*<i>(\d+)%<\/i>.*$', '$1')
  

• 如果你用的是只支持XPath 1.0的常见爬虫/解析环境（比如Python lxml、Scrapy、旧版浏览器），XPath本身不支持正则替换，先拿属性值再做字符串处理即可：
  第一步先取属性值的XPath：

  //div[contains(@class,'custom_popover')]/@data-content
  

  拿到属性字符串之后，用你写代码的语言自带的字符串截取/正则方法把数字抠出来就行，比如Python里的实现参考：

  # 拿到data-content的字符串结果后
  content_str = '<i>15%</i><b>Web Design</b>'
  target_num = content_str.split('<i>')[1].split('%')[0]
  # 最终得到的target_num就是'15'
  

踩坑提醒：不要写类似//div/@data-content/i这种表达式，属性值内部的标签不是DOM节点，XPath根本识别不到，跑了只会返回空结果。

内容的提问来源于stack exchange，提问作者Shahidul Islam Pranto