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的
立即学习“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源代码（通常是
- 正则表达式的健壮性： 正则表达式依赖于目标网页的特定结构。如果网页结构或JavaScript变量命名方式发生变化，正则表达式可能需要更新。
-
Selenium的必要性： 尽管本例中requests + re更为高效，但Selenium在以下场景仍不可或缺：
- 数据通过AJAX异步加载，且数据接口不直接暴露或难以逆向分析。
- 页面内容完全由JavaScript动态生成，且数据不在原始HTML中。
- 需要模拟用户交互（如点击按钮、填写表单、滚动页面）来触发数据加载。
- 需要处理复杂的验证码或登录流程。
- 数据量： 对于大规模数据抓取，requests + re组合的性能远优于Selenium模拟浏览器，因为它避免了浏览器渲染的开销。
- 网页反爬： 有些网站会检测非浏览器请求（如User-Agent、Referer等），此时可能需要在requests.get()中添加headers参数来模拟浏览器请求。
总结
当目标数据以结构化的JavaScript变量形式存在于网页源代码中时，采用requests库获取页面内容，结合re模块进行正则表达式匹配提取，再利用pandas进行数据整理，是获取图表数据的高效且稳定的最佳实践。这种方法避免了模拟鼠标悬停等复杂且低效的Selenium操作，显著提升了数据抓取的效率和稳定性。在选择抓取策略时，应首先尝试分析页面源代码，判断数据是否可以直接解析，以此作为优先方案。
