使用 JavaScript 提取动态生成网页内容-js教程-PHP中文网

使用 JavaScript 提取动态生成网页内容

聖光之護

发布： 2025-10-26 09:45:02

原创

632人浏览过

使用 javascript 提取动态生成网页内容

本文将介绍如何从使用 JavaScript 动态生成内容的网页中提取数据。通过分析网页源代码，找到包含所需数据的 JSON 格式字符串，并使用合适的工具进行抓取，从而获取目标信息。本文以 `wowhead.com/today-in-wow` 为例，详细讲解提取动态生成内容的方法。

在网页抓取过程中，我们经常会遇到一些网页使用 JavaScript 动态生成内容的情况。这意味着网页的初始 HTML 代码中可能不包含我们需要的数据，这些数据是通过 JavaScript 在浏览器端动态添加的。本文将介绍一种常用的方法，用于从这类网页中提取数据。

分析网页源代码

首先，我们需要打开目标网页，并查看其源代码。大多数现代浏览器都提供了查看源代码的功能（通常可以通过右键点击页面选择“查看页面源代码”或使用开发者工具）。

立即学习“Java免费学习笔记（深入）”；

在源代码中，我们需要寻找可能包含目标数据的线索。由于网页使用 JavaScript 动态生成内容，因此数据很可能以某种形式嵌入在 JavaScript 代码中。常见的形式包括：

JSON 格式的数据： 数据可能以 JSON 格式字符串的形式存在于 JavaScript 变量中。
JavaScript 函数调用： 数据可能作为参数传递给 JavaScript 函数。

寻找数据线索

以 wowhead.com/today-in-wow 为例，我们希望提取 "Darkmoon Faire" 相关的信息。在查看源代码后，我们可以尝试搜索 "Darkmoon Faire" 或与该事件相关的关键词，例如 "event=479"。

通过搜索，我们可能会发现类似以下 JSON 格式的数据：

人民网AIGC-X

国内科研机构联合推出的AI生成内容检测工具

查看详情

{
   "icon": "calendar_weekendmistsofpandariastart",
   "name": "Timewalking Dungeon Event",
   "side": "both",
   "url": "/event=643/timewalking-dungeon-event"
}

登录后复制

这段 JSON 数据包含了事件的图标、名称、侧边栏显示位置和 URL。这表明网页使用 JSON 数据来描述事件信息，并且这些数据可能被 JavaScript 代码用于动态生成页面内容。

提取数据

一旦我们找到了包含数据的 JSON 格式字符串，就可以使用各种工具来提取数据。以下是一些常用的方法：

正则表达式： 可以使用正则表达式从源代码中提取 JSON 字符串。需要注意的是，正则表达式可能不够健壮，容易受到网页结构变化的影响。
HTML 解析器： 可以使用 HTML 解析器（例如 BeautifulSoup）解析网页源代码，然后使用 CSS 选择器或 XPath 表达式定位到包含 JSON 数据的 JavaScript 代码，并提取 JSON 字符串。
JavaScript 引擎： 可以使用 JavaScript 引擎（例如 Node.js 中的 vm 模块）执行网页中的 JavaScript 代码，然后从 JavaScript 变量中获取数据。这种方法可以处理更复杂的 JavaScript 代码，但需要更高的技术水平。
无头浏览器： 可以使用无头浏览器（例如 Puppeteer 或 Selenium）模拟浏览器行为，加载网页并执行 JavaScript 代码，然后从渲染后的 DOM 中提取数据。这种方法最为通用，可以处理各种复杂的网页，但效率相对较低。

示例代码 (Python + 正则表达式)

以下是一个使用 Python 和正则表达式提取 JSON 数据的示例代码：

import requests
import re
import json

url = "https://www.wowhead.com/today-in-wow"
response = requests.get(url)
html = response.text

# 使用正则表达式查找 JSON 数据
pattern = r"\{.*?\"url\": \"/event=\d+.*?}" # 更精确的匹配模式
matches = re.findall(pattern, html)

# 处理提取到的 JSON 数据
for match in matches:
    try:
        data = json.loads(match)
        print(data["name"], data["url"])
    except json.JSONDecodeError:
        print(f"Failed to decode JSON: {match}")

登录后复制

注意事项

网页结构变化： 动态生成内容的网页结构可能会经常变化，因此需要定期检查和更新提取数据的代码。
反爬虫机制： 某些网站可能会采取反爬虫机制，例如限制访问频率、验证码等。需要采取相应的措施来规避这些机制，例如设置 User-Agent、使用代理 IP 等。
法律法规： 在进行网页抓取时，需要遵守相关的法律法规和网站的使用条款，不得进行恶意抓取或侵犯网站的权益。

总结

从使用 JavaScript 动态生成内容的网页中提取数据需要一定的技巧和耐心。通过分析网页源代码，找到包含数据的 JSON 格式字符串，并使用合适的工具进行抓取，就可以获取目标信息。需要注意的是，网页结构可能会经常变化，并且某些网站可能会采取反爬虫机制，因此需要定期检查和更新提取数据的代码，并遵守相关的法律法规和网站的使用条款。

以上就是使用 JavaScript 提取动态生成网页内容的详细内容，更多请关注php中文网其它相关文章！