如何从网页提取JSON数据？解析爬取代码与页面元素关联

一、理解#chartEncours8a input")["value"]的关联 #

• 这段代码用的是CSS选择器：#chartEncours8a input 意思是选中id为chartEncours8a的元素下的<input>标签，然后提取该input标签的value属性值——这个属性里存的就是JSON格式的原始数据。
• 你找不到对应元素的常见原因：
  1. 页面是JS动态渲染的：requests.get()获取的是网站原始HTML，而浏览器检查工具看到的是JS执行后的渲染DOM，两者结构可能不一致，目标元素是JS加载后才生成的。
  2. 网站结构已更新：原代码对应的chartEncours8a元素ID或页面布局已经改版，不存在了。

二、复现爬取结果的可行方案 #

方案1：抓包直接请求API接口（推荐） #

打开浏览器开发者工具（F12），切换到Network标签，刷新页面后筛选XHR/Fetch请求，找包含图表数据的JSON接口。这类接口通常会返回结构化数据，直接请求比解析HTML更稳定。比如这个网站的持仓类数据，大概率会有带encours关键词的接口。

方案2：用无头浏览器渲染页面 #

如果必须依赖JS渲染后的DOM，改用selenium模拟浏览器加载，示例代码：

import json
import pandas as pd
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://www.quantalys.com/espace/518")
# 等待页面元素加载完成
driver.implicitly_wait(10)

try:
    input_elem = driver.find_element(By.CSS_SELECTOR, "#chartEncours8a input")
    data = json.loads(input_elem.get_attribute("value"))
    
    df = pd.DataFrame(data['dataProvider'])
    df['unit'] = data['valueAxes'][0]['unit']
    print(df)
finally:
    driver.quit()

三、从网站提取JSON数据的常用方法 #

• 内嵌JSON解析：很多网站会把JSON数据存到<script>标签、<input>的value属性里，用BeautifulSoup定位到对应标签后，提取内容再用json.loads()解析成字典。
• 抓包获取API接口：这是效率最高的方式，通过浏览器Network面板找到返回JSON数据的接口，直接用requests请求该URL就能拿到原始数据，无需处理HTML结构。
• 动态页面渲染提取：如果数据完全由JS生成且无独立API，用selenium或playwright模拟浏览器加载页面，等JS执行完成后再提取DOM中的数据。

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