应区分语义性换行与冗余换行：pre、textarea、script、style 内换行必须保留；仅清理标签间及普通文本节点中的无意义换行，推荐用 html-minifier 的 collapseWhitespace 选项安全压缩。
用正则批量删 HTML 源码中的换行符，但别误伤 pre/script
直接删所有 \n 或 \r\n 会破坏 pre、textarea、script 和 style 标签内的语义——这些地方的换行是功能性的，不是“冗余空白”。真正该清理的，是普通标签之间、属性值外、文本节点间的无意义换行。
安全做法是分上下文处理：
- 先用编辑器（如 VS Code）打开 HTML 文件，启用正则查找
- 查找：
]*>\s+]*>→ 匹配两个相邻标签之间的空白（含换行+缩进） - 替换为：
这类写法不通用，更稳妥的是直接替换为>>的紧凑形式，即两个标签紧挨着 - 对非特殊标签区域（比如
div、p、span内部），可用\s+(?= 查找标签前的多余空白，再替换为空
注意：不要用 [\r\n]+ 全局替换，否则 <script>console.log(1);</script> 可能被压成一行，虽不影响执行，但会让调试和协作变困难。
用 html-minifier 的 collapseWhitespace 安全压缩
这个选项不是简单删换行，而是模拟浏览器渲染逻辑：把块级元素之间的连续空白压缩为单个空格或完全移除，同时保留内联文本中单词间的自然空隙。
立即学习“前端免费学习笔记（深入）”；
启用方式（命令行）：
html-minifier --collapse-whitespace --minify-css --minify-js input.html -o output.html
关键行为：
-
<div>\n <p>Hello</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a> <p>实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p> </div> <a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>\n</div>→<div><p>Hello</p></div> -
<p>Hello World</p>→ 不动，因为单词间空格需保留 - 默认跳过
pre、textarea、script、style内容，无需额外配置 - 若页面大量使用
display: inline-block，需加--conservative-collapse false，否则标签间换行仍会渲染为空隙
JavaScript 动态清理 DOM 中的换行文本节点
如果目标是运行时清理（比如用户粘贴富文本后净化），不能靠正则扫整个 innerHTML，得逐节点操作，避免破坏结构。
核心逻辑是只处理 nodeType === 3（文本节点），且只清洗那些含可见字符的节点：
function cleanTextNodes(node) {
if (node.nodeType === 3) {
const text = node.textContent;
if (/\S/.test(text)) { // 跳过纯空白文本节点
node.textContent = text.trim().replace(/\s+/g, ' ');
}
} else {
for (let child of node.childNodes) {
cleanTextNodes(child);
}
}
}
cleanTextNodes(document.body);
要点：
- 必须遍历
childNodes，不是children——后者过滤掉文本节点，会漏掉换行生成的空文本 -
\s+比+更鲁棒，覆盖\t、\r、\n、Unicode 空白等 - 不建议用
$("#el").text().replace(...)，它会合并所有子文本节点并丢弃原始结构
Notepad++ 批量删换行前，先确认是否真要删
很多所谓“多余换行”，其实是人为排版习惯。盲目删除会导致：
- HTML 属性值跨行被切开，如
class="header\nmain"→ 替换后变成class="headermain" - 注释错位：
<!--\nstart-->变成<!--start-->看似没事，但若后面紧跟 JS 模板字面量，可能触发语法警告 - 服务器端模板（如 PHP 的
<?php echo $x ?>）换行丢失，影响输出缓冲或 header 发送
实操建议：
- 先用 Notepad++ 的「视图 → 显示符号 → 显示所有字符」确认换行符类型（
CRLF还是LF） - 查找：
\r\n或\n，替换留空 → 仅限你明确知道不会影响语义的区域（比如两个之间的空行） - 更稳妥：用「查找 → 在文件中查找」配合正则
>\s+（注意勾选「正则表达式」），只删标签间的空白
最常被忽略的一点：HTML 压缩后的体积节省，往往不如开启 Gzip 或 Brotli 来得明显；而可读性下降、协作成本上升却是即时发生的。删换行不是目的，让 HTML 更健壮、更易维护才是。
