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

使用 JavaScript 提取动态网页内容

霞舞

发布： 2025-10-26 11:26:14

原创

353人浏览过

使用 javascript 提取动态网页内容

本文旨在介绍如何从使用 JavaScript 动态生成内容的网页中提取数据。通过分析网页源代码，定位关键数据，并利用正则表达式等工具提取所需信息，为网络爬虫开发提供一种解决方案。

对于一些网站，其部分内容并非直接包含在 HTML 源代码中，而是通过 JavaScript 动态生成。这给数据抓取带来了一定的挑战。本文将介绍一种针对这种情况的解决方案，即通过分析网页源代码，定位包含数据的 JavaScript 代码片段，并从中提取所需信息。

分析网页源代码

首先，我们需要查看目标网页的源代码。可以通过浏览器自带的开发者工具（通常按 F12 键打开）或者使用 curl 等命令行工具获取网页的 HTML 内容。

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

在源代码中，我们需要寻找包含目标数据的 JavaScript 代码。一种常用的方法是搜索目标数据中独有的字符串，例如，在示例中，我们可以搜索 event=479 或 event=643。

定位数据

通过搜索，我们可能找到一个包含 JSON 格式数据的 JavaScript 代码片段。例如：

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

登录后复制

这个 JSON 对象包含了我们想要抓取的信息，例如活动名称、图标 URL 和活动 URL。

提取数据

一旦我们找到了包含数据的 JavaScript 代码片段，就可以使用正则表达式或其他字符串处理方法来提取所需的信息。

虎课网

虎课网是超过1800万用户信赖的自学平台，拥有海量设计、绘画、摄影、办公软件、职业技能等优质的高清教程视频，用户可以根据行业和兴趣爱好，自主选择学习内容，每天免费学习一个...

查看详情

例如，我们可以使用以下正则表达式来提取 JSON 对象：

import re

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

pattern = re.compile(r'\{.*?\"url\": \"\/event=\d+\/.*?\".*?\}', re.DOTALL)
match = pattern.search(html_content)

if match:
    json_data = match.group(0)
    print(json_data)
else:
    print("No JSON data found.")

登录后复制

这段代码首先定义了一个包含 JSON 对象的 HTML 字符串。然后，它使用正则表达式 \{.*?\"url\": \"\/event=\d+\/.*?\".*?\} 来匹配 JSON 对象。re.DOTALL 标志使得 . 可以匹配换行符，从而可以匹配多行 JSON 对象。

如果匹配成功，match.group(0) 将返回匹配到的 JSON 字符串。然后，我们可以使用 json.loads() 函数将 JSON 字符串转换为 Python 字典，并从中提取所需的信息。

完整示例（Python）

import re
import requests
import json

def extract_data(url):
    """
    从网页源代码中提取 JSON 数据。
    """
    try:
        response = requests.get(url)
        response.raise_for_status()  # 检查请求是否成功

        html_content = response.text

        pattern = re.compile(r'\{.*?\"url\": \"\/event=\d+\/.*?\".*?\}', re.DOTALL)
        matches = pattern.findall(html_content)

        data = []
        for match in matches:
            try:
                json_data = json.loads(match)
                data.append(json_data)
            except json.JSONDecodeError:
                print(f"Error decoding JSON: {match}")

        return data

    except requests.exceptions.RequestException as e:
        print(f"Error fetching URL: {e}")
        return None


if __name__ == "__main__":
    url = "https://www.wowhead.com/today-in-wow"
    extracted_data = extract_data(url)

    if extracted_data:
        for item in extracted_data:
            print(f"Name: {item['name']}")
            print(f"URL: {item['url']}")
            print("-" * 20)
    else:
        print("No data extracted.")

登录后复制

这段代码首先定义了一个 extract_data 函数，该函数接受一个 URL 作为参数，并返回一个包含 JSON 数据的列表。该函数首先使用 requests.get() 函数获取网页的 HTML 内容。然后，它使用正则表达式来匹配 JSON 对象，并使用 json.loads() 函数将 JSON 字符串转换为 Python 字典。最后，它将 JSON 字典添加到列表中，并返回该列表。

在 if __name__ == "__main__": 块中，我们调用 extract_data 函数来提取数据，并打印提取到的数据。

注意事项

网站结构变化： 网站的结构可能会发生变化，导致正则表达式失效。因此，需要定期检查和更新正则表达式。
反爬虫机制： 某些网站可能会使用反爬虫机制来阻止数据抓取。例如，网站可能会限制请求频率或使用 CAPTCHA 验证。需要采取相应的措施来绕过这些反爬虫机制。
法律和道德： 在抓取数据之前，请务必阅读网站的robots.txt文件和使用条款，并遵守相关的法律和道德规范。

总结

本文介绍了一种从使用 JavaScript 动态生成内容的网页中提取数据的方法。该方法包括分析网页源代码、定位数据和提取数据。通过这种方法，我们可以抓取到一些无法通过传统方法抓取的数据。但是，需要注意网站结构的变化、反爬虫机制以及相关的法律和道德规范。

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