如何在反向代理响应的<body>起始标签后注入代码片段？

这里有两种靠谱的方法帮你把目标HTML片段插入到<body>起始标签的紧后面，你可以根据场景选择：

方法1：正则表达式（快速脚本场景） #

适合处理结构简单、没有特殊字符的HTML，不需要额外依赖库。核心思路是精准匹配<body>的起始标签（包括所有属性），然后把片段追加到匹配到的标签后面。

Python示例： #

import re

# 你的原始HTML内容
original_html = '''<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> </head> <body class="foo bar baz" data-foo="klaskassa" data-baz="lkaslkas" id="body"> </body> </html>'''
# 要插入的代码片段
snippet = '<div class="my-snippet"> ... </div>'

# 正则匹配<body开头的完整起始标签
pattern = r'(<body[^>]+>)'
# 替换时把片段加到匹配到的标签后面
modified_html = re.sub(pattern, r'\1' + snippet, original_html)

print(modified_html)

JavaScript示例： #

const originalHtml = `<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> </head> <body class="foo bar baz" data-foo="klaskassa" data-baz="lkaslkas" id="body"> </body> </html>`;
const snippet = '<div class="my-snippet"> ... </div>';

// 用正则匹配<body起始标签并插入片段
const modifiedHtml = originalHtml.replace(/(<body[^>]+>)/, '$1' + snippet);
console.log(modifiedHtml);

⚠️ 注意：正则处理HTML有局限性，如果你的HTML里有注释包含<body、或者body标签的属性里有特殊转义字符，可能会出现误匹配，这种情况就别用正则了。

方法2：DOM解析库（推荐，稳定可靠） #

HTML是结构化文档，用专门的DOM解析库处理才是最稳妥的方式，不管HTML结构多复杂都不会出错。

Python示例（用BeautifulSoup）： #

首先得安装库：pip install beautifulsoup4

from bs4 import BeautifulSoup

original_html = '''<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> </head> <body class="foo bar baz" data-foo="klaskassa" data-baz="lkaslkas" id="body"> </body> </html>'''
snippet = '<div class="my-snippet"> ... </div>'

# 解析原始HTML
soup = BeautifulSoup(original_html, 'html.parser')
# 获取<body>标签
body_tag = soup.body

# 把片段解析成DOM元素
snippet_element = BeautifulSoup(snippet, 'html.parser').div
# 插入到<body>的第一个子节点位置（紧接起始标签后）
body_tag.insert(0, snippet_element)

# 输出修改后的HTML
modified_html = str(soup)
print(modified_html)

JavaScript示例（Node.js用Cheerio）： #

首先安装库：npm install cheerio

const cheerio = require('cheerio');

const originalHtml = `<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> </head> <body class="foo bar baz" data-foo="klaskassa" data-baz="lkaslkas" id="body"> </body> </html>`;
const snippet = '<div class="my-snippet"> ... </div>';

// 加载HTML
const $ = cheerio.load(originalHtml);
// 把片段插入到<body>的最前面
$('body').prepend(snippet);

// 输出修改后的HTML
const modifiedHtml = $.html();
console.log(modifiedHtml);

如果是浏览器环境，直接用原生DOM API就行：

// 假设页面已经加载完成
const snippet = document.createElement('div');
snippet.className = 'my-snippet';
// 给snippet添加内容
snippet.innerHTML = ' ... ';
// 插入到<body>的第一个子节点前
document.body.insertBefore(snippet, document.body.firstChild);

内容的提问来源于stack exchange，提问作者Amin Shah Gilani