如何在Node中运行HTML文档内的script并获取脚本执行后的结果文档

核心实现思路：你需要在Node侧模拟浏览器的DOM环境，执行HTML中的脚本后再序列化得到最终的HTML内容，推荐两种适配不同场景的实现方案：

方案1：轻量DOM模拟库 jsdom（适合大多数常规场景） #

• 安装依赖：npm install jsdom
• 实现代码：

const { JSDOM } = require('jsdom');

// 替换为你的原始HTML字符串
const originalHTML = `
<p id="text">First text</p>
<script>
    document.getElementById('text').innerHTML = 'Second text';
</script>
`;

// 初始化JSDOM，开启脚本执行权限
const dom = new JSDOM(originalHTML, {
  // 允许执行内联脚本，注意仅在脚本来源可信时开启
  runScripts: 'dangerously',
  // 如果你的脚本依赖外部JS/CSS资源可开启该配置
  resources: 'usable'
});

// 脚本执行完成后序列化DOM得到最终HTML
const finalHTML = dom.serialize();
console.log(finalHTML);

• 适配异步脚本说明：如果脚本包含异步逻辑，需要等待异步执行完成后再调用serialize()，可以配合dom.window.setTimeout或者监听对应DOM事件实现。

方案2：无头浏览器 Puppeteer（适合复杂脚本场景） #

如果你的脚本依赖大量浏览器原生API、或者存在复杂的异步渲染逻辑，jsdom无法兼容的话，可以使用Puppeteer启动无头Chrome模拟真实浏览器环境：

• 安装依赖：npm install puppeteer
• 实现代码：

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 加载你的原始HTML内容
  const originalHTML = `
  <p id="text">First text</p>
  <script>
      document.getElementById('text').innerHTML = 'Second text';
  </script>
  `;
  await page.setContent(originalHTML);

  // 等待页面加载完成后获取最终HTML
  const finalHTML = await page.content();
  console.log(finalHTML);

  // 关闭浏览器释放资源
  await browser.close();
})();

安全提示 #

如果需要执行的是不可信来源的第三方脚本，建议优先使用Puppeteer的沙箱模式，避免脚本泄露Node环境的敏感信息。

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