html-minifier 的 collapseWhitespace 选项安全压缩块级元素间空白,跳过 pre/script/style/textarea,保留文本内空格和语义,不处理属性值空白。

直接删所有换行符会破坏 Hellopre、textarea、script 和 style 的语义,必须跳过这些标签内容;真正该压缩的是块级元素之间的空白(如 中的换行+缩进)。
用 html-minifier 的 collapseWhitespace 安全压缩
这个选项不是暴力删换行,而是模拟浏览器解析逻辑:只把块级元素之间连续的空白(换行+制表符+空格)压缩为单个空格,或完全移除(取决于配置),同时保留文本内单词间距和 pre 等标签内的原始格式。
-
collapseWhitespace: true会把变成A
B
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
,但不会动A
B
里的空格Hello World
- 若页面含大量
inline-block元素,需额外设conservativeCollapse: false,否则标签间换行仍可能渲染为空隙 - 它不处理属性值里的空白,例如
class=" header main "不会被简化——得靠正则或 PostHTML 插件单独处理 - 命令行使用示例:
npx html-minifier --collapse-whitespace --remove-comments --minify-css --minify-js input.html -o output.html
VS Code 正则批量删普通标签间换行(跳过特殊标签)
适合没构建流程、临时清理单个文件或模板页。关键在「避开 pre/script/style/textarea」,不能无差别替换。
- 打开 VS Code,Ctrl + H,勾选右上角
.*(启用正则) - 搜索:
(?s)]*>[s ]+ —— 匹配两个非特殊标签之间的空白 - 替换为:
>(即紧贴闭合与开始) - ⚠️ 注意:该正则不处理标签开头前、结尾后的换行,也不处理属性值内换行;若需更彻底,建议结合
html-minifier或 DOM 遍历方案
DOM 遍历清理文本节点换行(服务端/Node.js 场景)
源码中因缩进而产生的换行,在服务端渲染或 DOM 序列化时会变成真实文本节点(nodeType === 3),影响 textContent 提取结果。此时正则已不可靠,必须走 DOM 树遍历。
- 只处理含有效字符的文本节点:
/\S/.test(node.textContent),跳过纯生成的空节点 - 对保留的文本节点执行:
node.textContent = node.textContent.trim().replace(/\s+/g, ' ')——\s涵盖所有空白符,比/ +/g更鲁棒 - 必须遍历
childNodes(而非children),因为后者只返回元素节点,会漏掉换行文本节点 - 别用 jQuery 的
.text(),它会合并所有子文本节点并丢弃结构,无法控制清洗粒度
最容易被忽略的是:清理后要验证 pre 内容是否仍可读、script 是否语法正确、以及 textarea 初始值是否未被破坏。自动化清理永远要以「不改语义」为第一前提,而不是追求最小体积。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










