Node服务端如何向返回的HTML字符串的head中插入script脚本

方案1：使用HTML解析库cheerio（最稳定，推荐） #

cheerio是Node生态下专用的轻量化HTML解析工具，API和jQuery完全对齐，基于AST解析HTML，完全规避正则匹配的边界异常问题（比如head标签带属性、换行、存在注释等场景都能正确处理），远优于简单的replace方案。

• 安装依赖

npm install cheerio

• 修改业务代码：

const cheerio = require('cheerio');

server.get('*', async (request, response) => {
  const url = request.protocol + '://' + request.get('host') + request.originalUrl;

  const { html } = await renderPage(url, {
    manifest,
    preload: true,
    request,
    response
  });

  // 注入script逻辑
  const $ = cheerio.load(html);
  // 往head末尾插入script，也可以用prepend插到head开头
  $('head').append(`<script>/* 你的自定义脚本内容 */</script>`);
  // 生成修改后的HTML
  const modifiedHtml = $.html();

  response.end(modifiedHtml);
});

方案2：无依赖的严谨正则匹配（轻量化场景可选） #

如果不想引入额外依赖，且可以确认服务端生成的HTML格式足够规范，可以用边界判断更严谨的正则替换，比普通字符串replace容错率更高：

// 匹配</head>闭合标签，忽略大小写、支持标签前存在空格/换行/制表符
const modifiedHtml = html.replace(/(\s*)(<\/head>)/i, (match, spaceBefore, headCloseTag) => {
  // 插入的脚本保持和原有标签一致的缩进，输出格式更规整
  return `${spaceBefore}<script>/* 自定义脚本内容 */</script>\n${spaceBefore}${headCloseTag}`;
});

方案3：渲染阶段注入（性能最优，可选） #

如果你的renderPage方法支持自定义配置参数，可以直接在渲染阶段传入需要注入的head内容，不需要事后修改HTML字符串，性能损耗最低。比如大部分SSR框架都支持自定义head插槽、render回调等能力，你可以根据你用的渲染工具的文档调整参数即可。

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