制作学校新冠宣传信息图：如何解析含JavaScript下拉列表的网页？

嘿，这个场景我太熟了！之前帮同学做校园数据可视化的时候也碰到过JS渲染的下拉列表，给你分享几个实用的解析方法：

1. 用带JS渲染能力的爬虫工具模拟浏览器行为 #

这类工具能完全模拟真实用户打开浏览器的过程，等待页面JS执行完毕、下拉列表渲染出来后再抓取内容，几乎能应对所有动态页面场景。常用的有Playwright、Puppeteer、Selenium，这里给你个Playwright的Python示例：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 启动浏览器（headless=False可以看到可视化界面，默认是无头模式）
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("你要访问的目标URL")
    # 等待下拉列表元素加载完成，替换成你页面下拉框的CSS选择器
    page.wait_for_selector("#state-dropdown")
    # 获取所有下拉选项的文本内容
    option_texts = page.locator("#state-dropdown option").all_text_contents()
    print(option_texts)
    browser.close()

这个方法的优势是兼容性极强，不管页面JS逻辑多复杂，都能拿到最终渲染的内容，唯一的小缺点是比纯接口请求慢一点，但对于校园项目来说完全够用。

2. 直接抓取后端API（最推荐！） #

很多下拉列表的内容是通过AJAX请求从后端API拉取的，这种情况下直接请求API比爬页面高效太多。操作步骤很简单：

• 打开浏览器开发者工具（按F12），切换到「Network」标签页
• 点击页面上的下拉列表，触发加载动作
• 在Network面板里找XHR/Fetch类型的请求，找到返回下拉选项数据的那个接口
• 复制接口URL，直接用requests库请求就能拿到结构化的JSON数据

示例代码：

import requests

# 替换成你找到的API地址
api_url = "https://example.com/api/states"
response = requests.get(api_url)
response.raise_for_status()  # 处理请求错误
data = response.json()
# 提取你需要的选项内容，根据API返回的结构调整
state_options = [item["state_name"] for item in data["data"]]
print(state_options)

这个方法速度快、数据结构清晰，是最优解，优先试试这个！

3. 提取页面内嵌的JS变量数据 #

有些网站会把下拉列表的数据源直接内嵌在页面的JS代码里，比如你在页面源码里搜索可能会找到类似var stateList = [...]这样的数组。这种情况下可以用正则表达式提取这段数据，再转换成JSON处理：

示例代码：

import re
import json
import requests

page_url = "你要访问的目标URL"
response = requests.get(page_url)
# 正则匹配内嵌的JS数组，根据实际变量名调整正则表达式
pattern = re.compile(r'var stateList = (\[.*?\]);', re.DOTALL)
match_result = pattern.search(response.text)

if match_result:
    # 把匹配到的字符串转换成JSON对象
    state_data = json.loads(match_result.group(1))
    state_options = [item["label"] for item in state_data]
    print(state_options)
else:
    print("没找到内嵌的JS数据")

这个方法不需要额外请求或模拟浏览器，适合数据直接写在页面里的简单场景。

内容的提问来源于stack exchange，提问作者llssff