在Flask应用中使用BeautifulSoup搜索指定<span>标签返回空结果

嘿，我来帮你搞定这个问题～你遇到的情况其实很常见，原因主要是目标网站的这个标签是通过JavaScript动态渲染出来的，而你用requests.get()只能获取到服务器返回的静态HTML源码，这部分源码里根本没有你要找的那个元素，所以BeautifulSoup自然搜不到结果。

下面给你两种可行的解决方案：

方案一：用Selenium模拟浏览器加载页面 #

Selenium会模拟真实浏览器的行为，等待页面上的JavaScript执行完成，这样就能拿到完整的渲染后页面。步骤如下：

1. 先安装Selenium：

   pip install selenium
   

2. 下载对应浏览器的驱动（比如ChromeDriver，要和你的Chrome浏览器版本匹配），记住驱动的路径。
3. 修改后的代码示例：

   from bs4 import BeautifulSoup
   from selenium import webdriver
   from selenium.webdriver.chrome.service import Service
   from selenium.webdriver.support.ui import WebDriverWait
   from selenium.webdriver.support import expected_conditions as EC
   from selenium.webdriver.common.by import By
   
   url = "https://www.mcfit.com/de/fitnessstudios/studiosuche/studiodetails/studio/berlin-lichtenberg/"
   
   # 初始化Chrome驱动，替换成你的驱动文件路径
   service = Service('/path/to/your/chromedriver')
   driver = webdriver.Chrome(service=service)
   driver.get(url)
   
   # 等待目标元素加载完成，最多等待10秒
   try:
       WebDriverWait(driver, 10).until(
           EC.presence_of_element_located((By.CLASS_NAME, "sc-fzoXWK"))
       )
   finally:
       # 获取渲染后的页面源码
       html_content = driver.page_source
       driver.quit()  # 关闭浏览器
   
   soup = BeautifulSoup(html_content, "lxml")
   spans = soup.find_all('span', {'class': 'sc-fzoXWK hnKkAN'})
   print(spans)
   

方案二：寻找数据接口直接请求 #

很多动态网站会通过API接口获取数据然后渲染，你可以打开浏览器的开发者工具（F12），切换到「网络」标签，刷新页面后找XHR/fetch请求，看看有没有返回你需要的内容的接口。如果能找到，直接用requests请求这个接口，就能拿到结构化数据，比解析HTML更高效可靠。

额外提醒 #

你要注意，像sc-fzoXWK、hnKkAN这种看起来很随机的class名，一般是前端框架（比如React）自动生成的，后续网站更新时可能会变化。如果可以的话，尽量用更稳定的定位方式，比如：

• 依据元素的文本内容搜索：

  spans = soup.find_all('span', string=lambda text: text and "目标关键词" in text.strip())
  

• 依据元素的父/祖元素的固定class或ID来定位，再找子元素。

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