如何高效抓取网页图表数据:绕过鼠标悬停,直取JavaScript变量

聖光之護
发布: 2025-07-20 14:04:11
原创
679人浏览过

如何高效抓取网页图表数据:绕过鼠标悬停,直取javascript变量

本文旨在解决网页图表数据抓取中常见的鼠标悬停(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请求获取。在这种情况下,最高效的方法是直接从网页源代码中解析这些原始数据,而不是通过模拟浏览器行为。

立即学习Java免费学习笔记(深入)”;

通过检查目标网页的源代码(通常通过浏览器开发者工具),我们发现价格历史数据被存储在一个JavaScript变量中,以dataArray.push({x: ..., y: ...})的形式存在。这种结构非常适合使用正则表达式进行提取。

小羊标书
小羊标书

一键生成百页标书,让投标更简单高效

小羊标书 62
查看详情 小羊标书

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变量)中的情况。许多图表库在客户端渲染前,会将数据直接嵌入页面。
  • 正则表达式的健壮性: 正则表达式依赖于目标网页的特定结构。如果网页结构或JavaScript变量命名方式发生变化,正则表达式可能需要更新。
  • Selenium的必要性: 尽管本例中requests + re更为高效,但Selenium在以下场景仍不可或缺:
    • 数据通过AJAX异步加载,且数据接口不直接暴露或难以逆向分析。
    • 页面内容完全由JavaScript动态生成,且数据不在原始HTML中。
    • 需要模拟用户交互(如点击按钮、填写表单、滚动页面)来触发数据加载。
    • 需要处理复杂的验证码或登录流程。
  • 数据量: 对于大规模数据抓取,requests + re组合的性能远优于Selenium模拟浏览器,因为它避免了浏览器渲染的开销。
  • 网页反爬: 有些网站会检测非浏览器请求(如User-Agent、Referer等),此时可能需要在requests.get()中添加headers参数来模拟浏览器请求。

总结

当目标数据以结构化的JavaScript变量形式存在于网页源代码中时,采用requests库获取页面内容,结合re模块进行正则表达式匹配提取,再利用pandas进行数据整理,是获取图表数据的高效且稳定的最佳实践。这种方法避免了模拟鼠标悬停等复杂且低效的Selenium操作,显著提升了数据抓取的效率和稳定性。在选择抓取策略时,应首先尝试分析页面源代码,判断数据是否可以直接解析,以此作为优先方案。

以上就是如何高效抓取网页图表数据:绕过鼠标悬停,直取JavaScript变量的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号