本文旨在解决网页图表数据抓取中常见的鼠标悬停（mouse-hover）信息获取难题。针对特定场景，当图表数据已嵌入网页的JavaScript变量中时，通过python的requests库获取页面内容，结合正则表达式re直接解析并提取数据，再利用pandas进行结构化处理，可实现比模拟鼠标悬停更高效、稳定的数据抓取，并避免Selenium操作的复杂性和性能开销。
1. 问题分析与传统方法局限性
在网页数据抓取过程中，我们经常遇到需要获取图表上鼠标悬停时才显示的数据（如价格历史、性能曲线等）。常见的直觉是使用自动化测试工具如Selenium，模拟用户行为：打开浏览器、定位图表元素、模拟鼠标移动到元素上，然后尝试获取弹出的提示信息。
原始尝试的代码片段展示了这种思路：
from selenium import webdriver from selenium.webdriver import ActionChains from selenium.webdriver.chrome.service import Service from selenium.webdriver.chrome.options import Options from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.common.by import By from selenium.webdriver.support import expected_conditions as EC # ... (初始化WebDriver代码省略) ... driver.get('https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%40+3.50GHz&id=3904') # 尝试定位图表元素 element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//*[@id='placeholder']/div/canvas[2]"))) # 问题所在：element是一个WebElement对象，不可直接迭代 for el in element: # 导致 'WebElement' Object is not iterable 错误 ActionChains(driver).move_to_element(el).perform() mouseover = WebDriverWait(driver, 30).until(EC.visibility_of_element_located((By.SELECTOR, ".placeholder > div > div.canvasjs-chart-tooltip > div > span"))) print(mouseover.text)
上述代码中，WebDriverWait(…).until(EC.presence_of_element_located(…))返回的是一个WebElement对象，代表了单个元素，而非一个元素列表，因此直接对其进行for el in element:迭代会导致’WebElement’ object is not iterable的运行时错误。即使修正了迭代问题，模拟大量鼠标悬停操作来获取所有数据，效率也极其低下，且容易因页面加载、元素定位不准确等问题导致抓取失败。
2. 高效解决方案：直接解析JavaScript数据
对于许多动态加载的图表数据，尤其是使用JavaScript库（如CanvasJS、echarts、Highcharts等）渲染的图表，其数据源往往在页面加载时就已经嵌入到html的<script>标签中，或者通过ajax请求获取。在这种情况下，最高效的方法是直接从网页源代码中解析这些原始数据，而不是通过模拟浏览器行为。</script>
立即学习“Java免费学习笔记（深入）”；
通过检查目标网页的源代码（通常通过浏览器开发者工具），我们发现价格历史数据被存储在一个JavaScript变量中，以dataArray.push({x: …, y: …})的形式存在。这种结构非常适合使用正则表达式进行提取。
3. 核心代码实现与解析
以下是使用requests、re和pandas库实现高效数据抓取的完整代码：
import re import pandas as pd import requests # 目标网页URL url = "https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%40+3.50GHz&id=3904" # 1. 使用requests获取网页的HTML内容 # requests库可以直接获取页面的原始HTML，不执行JavaScript，速度快。 html_text = requests.get(url).text # 2. 使用正则表达式从HTML中提取数据 # re.findall() 用于查找所有匹配正则表达式的非重叠匹配项。 # 正则表达式 r"dataArray.push({x: (d+), y: ([d.]+)}" 的解释： # - dataArray.push({x: ：匹配字面字符串 "dataArray.push({x:"。注意点号需要转义。 # - (d+)：第一个捕获组，匹配一个或多个数字（对应时间戳）。 # - , y: ：匹配字面字符串 ", y:"。 # - ([d.]+)：第二个捕获组，匹配一个或多个数字或点（对应价格）。 # - }：匹配字面字符串 "}"。 # 整个模式旨在捕获 `x` 和 `y` 括号内的值。 df = pd.DataFrame( re.findall(r"dataArray.push({x: (d+), y: ([d.]+)}", html_text), columns=["time", "price"], ) # 3. 数据类型转换与清洗 # 原始的时间戳是毫秒级，需要转换为秒级后，再使用pd.to_datetime转换为日期时间格式。 # astype(int) 将字符串时间戳转换为整数。 # // 1000 将毫秒转换为秒。 # unit="s" 指定时间单位为秒。 df["time"] = pd.to_datetime(df["time"].astype(int) // 1000, unit="s") # 4. 打印处理后的数据框的尾部几行 print(df.tail())
4. 运行结果展示
执行上述代码，将得到一个包含时间和价格的Pandas DataFrame，其尾部数据示例如下：
time price 236 2023-05-28 06:00:00 317.86 237 2023-05-29 06:00:00 319.43 238 2023-05-30 06:00:00 429.99 239 2023-05-31 06:00:00 314.64 240 2023-06-01 06:00:00 318.9
这清晰地展示了CPU价格随时间变化的趋势数据，并且以结构化的DataFrame形式方便后续分析。
5. 注意事项与适用场景
- 适用场景： 这种方法适用于数据已经存在于HTML源代码（通常是<script>标签内的JavaScript变量）中的情况。许多图表库在客户端渲染前，会将数据直接嵌入页面。</script>
- 正则表达式的健壮性： 正则表达式依赖于目标网页的特定结构。如果网页结构或JavaScript变量命名方式发生变化，正则表达式可能需要更新。
- Selenium的必要性： 尽管本例中requests + re更为高效，但Selenium在以下场景仍不可或缺：
- 数据量： 对于大规模数据抓取，requests + re组合的性能远优于Selenium模拟浏览器，因为它避免了浏览器渲染的开销。
- 网页反爬： 有些网站会检测非浏览器请求（如User-Agent、Referer等），此时可能需要在requests.get()中添加headers参数来模拟浏览器请求。
总结
当目标数据以结构化的JavaScript变量形式存在于网页源代码中时，采用requests库获取页面内容，结合re模块进行正则表达式匹配提取，再利用pandas进行数据整理，是获取图表数据的高效且稳定的最佳实践。这种方法避免了模拟鼠标悬停等复杂且低效的Selenium操作，显著提升了数据抓取的效率和稳定性。在选择抓取策略时，应首先尝试分析页面源代码，判断数据是否可以直接解析，以此作为优先方案。
