如何提取并保存特定div标签内的HTML源码-html教程-PHP中文网

用 queryselector 获取目标 div 的 outerhtml 可精准提取其原始 html 字符串，含标签、属性、注释、cdata、自定义标签及空格；需避免 innerhtml、innertext 等会丢失结构或格式的方法。

如何提取并保存特定div标签内的html源码

用 `querySelector` 精准抓取目标 `div` 的原始 HTML 字符串

浏览器环境里，querySelector 是最直接的方式——它返回的是 DOM 元素对象，而它的 outerHTML 属性正好包含该元素及其所有子内容的完整 HTML 源码（含标签、属性、文本、注释等）。注意别用 innerHTML，它只返回子节点内容，会丢掉外层 div 自身的标签和属性。

若目标 div 有唯一 id：document.querySelector('#my-container').outerHTML
若靠 class 匹配（多个时取第一个）：document.querySelector('.article-body').outerHTML
若需匹配多个并全部提取：document.querySelectorAll('.item').forEach(el => console.log(el.outerHTML))

保存为文件时，`outerHTML` 字符串必须转义换行与引号

直接把 outerHTML 字符串写入文件不会出错，但若用 data: URL 触发下载（常见于前端一键导出），原始 HTML 中的换行、双引号、尖括号会被解析器截断或误判。必须用 encodeURIComponent 编码后再拼进 data:text/html;charset=utf-8, 前缀中。

错误写法（可能崩溃或内容缺失）：data:text/html;charset=utf-8,<div class="a">hello</div>
正确写法：data:text/html;charset=utf-8,` + encodeURIComponent(htmlString)

完整示例：

const el = document.querySelector('#export-me');
const html = el.outerHTML;
const blob = new Blob([html], {type: 'text/html'});
const url = URL.createObjectURL(blob);
const a = Object.assign(document.createElement('a'), { href: url, download: 'section.html' });
a.click();
URL.revokeObjectURL(url);

服务端提取（如 Python + `BeautifulSoup`）要防编码丢失和嵌套截断

用 BeautifulSoup 解析 HTML 后，.find() 或 .select_one() 返回的 Tag 对象调用 prettify() 或 __str__() 都能拿到 HTML 字符串，但默认输出是 UTF-8 字节流，若原始网页声明了其他编码（如 GBK），不显式指定会乱码；另外，若目标 div 内含未闭合标签（比如手写的 <img> 无斜杠），BeautifulSoup 可能自动补全结构，导致输出与原始源码不一致。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

务必传入原始编码：BeautifulSoup(html_content, 'html.parser', from_encoding='gbk')
要严格还原原始字符串，优先用 tag.decode_contents(formatter=None)（不含外层标签）或 str(tag)（含外层）
避免用 prettify()，它会重排缩进和换行，破坏原始格式

容易被忽略的边界情况：注释、CDATA、自定义标签、空格敏感内容

outerHTML 和 str(tag) 都能保留 HTML 注释（）和 CDATA 段，这点常被当成“理所当然”，但如果你用正则粗暴匹配 <div.>.*?</div.> 就会完全失效——正则无法处理嵌套、换行、注释干扰。另外，像 <my-component></my-component> 这类自定义标签在旧版 innerHTML 中可能被剥离，但 outerHTML 不会；还有，某些 CMS 输出的 div 内部用大量或连续空格控制排版，textContent 会坍缩它们，而 outerHTML 完整保留。

真正要“提取并保存源码”，核心就一条：绕过任何中间解析/渲染环节，直取原始字节流或 DOM 序列化结果。一旦经过 innerText、textContent、JSON.stringify 或手动拼接，就不再是“源码”了。