在网页抓取和数据解析过程中，我们经常需要根据HTML元素的属性来定位它们。然而，当遇到非标准属性名（如包含方括号[]的属性，这通常是前端框架的动态绑定语法）或属性值中包含复杂逻辑表达式时，传统的CSS选择器往往力不从心。本文将深入探讨这一挑战，并提供一个基于XPath的强大解决方案。
1. 非标准属性的挑战：CSS选择器的局限性
考虑以下HTML结构：
11111111 222222222
这里，我们有两段标签，它们都具有itemprop="telephone"。关键的区别在于它们的[class]属性，这个属性名本身就包含了方括号，并且其值是一个条件表达式。
对于标准的HTML属性，CSS选择器如span[itemprop="telephone"]可以轻松定位。但对于[class]="revealtel?'':'invisible'"这样的属性，CSS选择器无法直接处理：
立即学习“前端免费学习笔记（深入）”；
- span[[class]="revealtel?'':'invisible'"]：语法错误，CSS选择器不识别属性名中的方括号作为字面量。
- span[class*="revealtel"]：这会尝试匹配名为class的属性，而不是名为[class]的属性。
因此，我们需要一种更灵活的查询语言来处理这种复杂情况，XPath正是为此而生。
2. 拥抱XPath：强大的定位能力
XPath（XML Path Language）是一种用于在XML文档中选择节点的语言，HTML作为一种特殊的XML文档，同样适用。XPath提供了比CSS选择器更强大的功能，尤其擅长处理复杂的层级关系、属性匹配以及非标准结构。
2.1 基础XPath选择
首先，我们可以通过itemprop属性选择所有相关的元素：
//span[@itemprop="telephone"]
这会返回所有itemprop为telephone的元素。但如前所述，这无法区分电话号码和传真号码。
2.2 定位带有特殊字符的属性
XPath允许我们通过name()函数来匹配属性名。这意味着我们可以直接定位名为[class]的属性。
//span[@*[name()="[class]"]]
- @*：选择所有属性。
- name()="[class]"：进一步筛选，只选择属性名为[class]的属性。
2.3 基于属性值内容的精确筛选
为了区分电话和传真，我们需要检查[class]属性的值中是否包含特定的字符串（例如revealtel或revealmainfax）。XPath的contains()函数可以帮助我们实现这一点。
结合上述概念，我们可以构建如下XPath表达式来精确选择目标元素：
-
选择包含“revealtel”的电话号码元素：
//span[@itemprop="telephone" and @*[name()="[class]" and contains(., "revealtel")]]/text()
这里，contains(., "revealtel")检查当前属性的值是否包含子字符串"revealtel"。
-
选择包含“revealmainfax”的传真号码元素：
//span[@itemprop="telephone" and @*[name()="[class]" and contains(., "revealmainfax")]]/text()
3. 实践应用：Scrapy中的XPath使用示例
在Scrapy爬虫中，我们可以利用response.xpath()方法执行XPath查询。以下是一个具体的Python代码示例，演示如何提取电话和传真号码：
import scrapy
import re
class MySpider(scrapy.Spider):
name = 'phone_fax_extractor'
start_urls = ['http://example.com/your_page_with_html'] # 替换为实际的URL
def parse(self, response):
telnum = None
faxnum = None
# 1. 直接使用XPath筛选出电话号码
# 匹配 itemprop="telephone" 且 [class] 属性值中包含 "revealtel" 的 span 元素的文本
tel_elements = response.xpath('//span[@itemprop="telephone" and @*[name()="[class]" and contains(., "revealtel")]]/text()')
if tel_elements:
telnum = tel_elements.get().strip() # .get() 获取第一个匹配项的文本
# 2. 直接使用XPath筛选出传真号码
# 匹配 itemprop="telephone" 且 [class] 属性值中包含 "revealmainfax" 的 span 元素的文本
fax_elements = response.xpath('//span[@itemprop="telephone" and @*[name()="[class]" and contains(., "revealmainfax")]]/text()')
if fax_elements:
faxnum = fax_elements.get().strip() # .get() 获取第一个匹配项的文本
self.logger.info(f"提取到的电话号码: {telnum}")
self.logger.info(f"提取到的传真号码: {faxnum}")
# 如果需要，也可以使用迭代和字符串匹配（如原答案所示），作为备用方案
# 这种方法在XPath引擎对 name()="[class]" 支持不佳时可能有用
# 或者当需要检查整个元素的原始HTML内容时
# numbers = response.xpath('//span[@itemprop="telephone"]')
# for element in numbers:
# # 获取整个元素的HTML字符串
# element_html = element.get()
# if re.search('revealmainfax', element_html):
# faxnum = element.xpath('./text()').get().strip()
# elif re.search('revealtel', element_html): # 注意：这里需要确保不是传真号，避免重复赋值
# telnum = element.xpath('./text()').get().strip()
# self.logger.info(f"（备用方法）提取到的电话号码: {telnum}")
# self.logger.info(f"（备用方法）提取到的传真号码: {faxnum}")
yield {
'telephone': telnum,
'fax': faxnum,
}
在上述代码中，我们直接构建了两个精确的XPath表达式，分别用于定位电话号码和传真号码，并通过.get()方法获取其文本内容。这种方法比先获取所有元素再循环判断更高效和简洁。
4. 注意事项
- XPath引擎兼容性： 尽管name()="[class]"这种用法在大多数现代XPath引擎（如lxml，Scrapy默认使用）中都能很好地工作，但在某些旧版或特定的XPath实现中，处理属性名中的特殊字符可能会有差异。如果遇到问题，可以考虑使用原答案中提供的，先获取整个元素的HTML内容（element.get()或element.extract()），再结合正则表达式re.search()进行匹配的备用方案。
- 非标准属性的含义： [class]这样的属性通常是前端框架（如Angular、Vue、React等）用于动态绑定class的语法。在浏览器中，这些属性会被处理，并最终影响元素的标准class属性。然而，Scrapy直接解析原始HTML，因此它会把[class]视为一个字面上的属性名。理解这一点有助于选择正确的解析策略。
- 页面动态性： 如果页面内容是通过JavaScript动态加载或修改的，Scrapy的默认HTTP请求可能无法获取到最终渲染后的HTML。在这种情况下，可能需要结合使用Selenium或其他无头浏览器来获取JavaScript执行后的页面内容。
5. 总结
当面对包含特殊字符的非标准HTML属性时，CSS选择器往往力不从心。XPath凭借其强大的功能，特别是通过name()函数定位特定属性名和contains()函数匹配属性值内容的能力，为我们提供了一个优雅而高效的解决方案。通过精确构建XPath表达式，我们可以直接定位目标元素并提取所需数据，从而简化爬虫逻辑并提高解析的准确性。在Scrapy等爬虫框架中，熟练运用XPath是提升数据抓取效率和处理复杂网页结构的关键技能。
