如何用PHP的DOMDocument抓取含双大括号变量占位符的网站？

这种双大括号的占位符（比如{{variable.code}}）几乎可以肯定是前端JavaScript框架（比如Vue.js、React，或者其他模板引擎）的客户端渲染标记。这类页面的工作流程是：服务器返回包含占位符的原始HTML，然后浏览器加载页面后执行JavaScript，从后端API或者本地数据中获取实际内容，再替换掉这些占位符——这就是为什么你在浏览器里能看到内容，但直接用PHP的DOMDocument抓取原始源码时只能看到占位符。

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

1. 直接请求后端数据接口（推荐） #

大多数前端渲染的网站都会通过AJAX（XHR/fetch）请求从后端API获取数据，你可以直接找到这个API接口，跳过HTML渲染步骤，直接获取结构化数据：

• 打开浏览器的开发者工具（按F12），切换到「Network」标签页；
• 刷新目标页面，在请求列表里筛选「XHR」或「Fetch」类型的请求；
• 逐个查看这些请求的响应内容，找到包含ABC1234这类目标数据的接口；
• 在PHP中使用curl或者file_get_contents（如果服务器允许）请求这个API接口，然后解析返回的JSON数据（大多数API会返回JSON格式）。

举个简单的PHP示例：

$apiUrl = 'https://目标网站的API接口地址';
$ch = curl_init($apiUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);

$data = json_decode($response, true);
// 从$data中提取你需要的内容，比如对应字段
echo $data['variable']['code']; // 假设接口返回的结构是这样

这种方法效率更高，数据结构更清晰，不需要处理HTML渲染的额外开销。

2. 使用无头浏览器渲染页面后抓取 #

如果网站没有公开的API接口，或者数据是通过JS动态生成且没有单独接口的，你需要模拟浏览器加载页面并执行JS，获取渲染后的完整HTML：

• 可以使用PHP的第三方库，比如spatie/browsershot（它依赖Puppeteer，需要先在服务器安装Node.js和Puppeteer）；
• 这个库可以调用无头Chrome/Chromium加载页面，等待JS执行完成后，返回渲染后的HTML，之后你就可以用DOMDocument正常解析内容了。

简单的使用示例：

use Spatie\Browsershot\Browsershot;

// 生成渲染后的HTML
$html = Browsershot::url('https://目标网站地址')
    ->waitUntilNetworkIdle() // 等待网络请求完成，确保JS渲染完毕
    ->html();

// 用DOMDocument处理渲染后的HTML
$dom = new DOMDocument();
libxml_use_internal_errors(true); // 忽略HTML解析时的非标准语法错误
$dom->loadHTML($html);
libxml_clear_errors();

// 找到对应的td元素并获取内容
$tds = $dom->getElementsByTagName('td');
foreach ($tds as $td) {
    echo $td->nodeValue; // 这里就能拿到渲染后的ABC1234了
}

需要注意的是，这种方法需要服务器具备Node.js和Puppeteer的运行环境，整体运行效率比直接请求API低一些，但能覆盖所有前端渲染的场景。

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