从 javascript 生成的输出中提取 html 源代码

Question

我目前正在执行一个实时查找我们学校空教室的项目。为此，我需要提取我们学校页面 (https://ssnovohradska.edupage.org/substitution/?) 上发布的替换内容，因为可能会有任何其他更改。

但是当我尝试提取 html 源代码并用 bs4 解析它时，它找不到包含替换文本的 divs(class: "section print-nobreak")。当我查看页面源代码（Ctrl+U）时，我发现只有一个 javascript 可以直接将其全部打印出来。

有什么方法可以在 javascript 输出已经渲染后提取 html 吗？

感谢您的帮助！

Answer 1

不幸的是，解析 HTML 是解决您的问题所必需的。但我会解释如何在你未来的项目中找到避免这种情况的方法（不是基于这个网站）。

1. 您已经正确地注意到文本是由页面上运行的 JavaScript 代码创建的。这也可能表明数据要么从另一个资源加载（XHR/fetch 调用从 API 获取响应），要么作为 JSON/JS 存储在网站代码中。 （或者是从算法生成的，但在此类网站中不太可能出现这种情况。）
2. 该网站实际上使用了这两种方法（初始渲染获取存储在网站代码中的数据，但是当您在日历上切换日期时，它会发出 AJAX 请求）。您可以通过在代码中搜索ReactDOM.render(React.createElement( 看到这一点。他们为 createElement 调用提供了一个 HTML 字符串，所以我建议研究 AJAX 的处理方式。
3. 现在，要检查资源的位置，您需要做的就是在您最喜欢的浏览器中打开开发者工具（通常是 Control+Shift+I）并导航到网络选项卡。现在您的网络标签已打开，您需要使网站加载外部数据，例如，通过按“日历栏”上的日期。
4. 在这里您会注意到许多外部请求，但我们实际上只寻找 XHR 调用。单击“过滤器”文本字段旁边的 XHR 按钮。这应该只会显示一个请求：

5. 不幸的是，响应只包含 HTML。此外，API 调用受到保护 - 它们需要 PHP 会话 ID 和某种令牌 (__gsh) 才能不会失败。因此，回到第 1 步 - 如果您只对今天的日期感兴趣，我们唯一的解决方案似乎是使用正则表达式从源代码中查找 "report_html":"<div class 和 </div></div></div> 之间的文本。如果您想获取明天或任何其他日期的内容 - 您需要获取页面、保存 cookie 并找到要提供给请求的令牌然后发出该请求，或者使用类似 puppeteer 或 @987654323 的内容@（因为您提到了 BS4）并在其中加载网页。如果您不经常提取数据，总体上应该没问题。