html解析时空白字符在构建dom树的解析阶段即被合并：所有连续空白字符（空格、制表符、换行符等）统一转为u+0020并压缩为单个空格，textcontent反映的是已压缩后的结果，该过程不可逆；仅、等特殊标签内部保留原始空白。
HTML解析时空白字符怎么被合并
浏览器在构建DOM树的解析阶段，就已把连续空白字符（ 、\t、\n、\r、\f）统一转为U+0020空格，并压缩成单个空格。这不是渲染时的“视觉效果”，而是DOM节点文本内容的真实值。
例如：<p>Hello\n\t World</p> 解析后，其textContent是"Hello World"，不是"Hello\n\t World"。
- 这个过程不可逆，JavaScript读取
textContent或innerText时拿到的就是已压缩的结果 -
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>、<style></style>内部不参与此合并，因为它们有明确的语义保留需求 - 标签之间的空白（如
<div>\n <p>A</p>\n</div>）也会被压缩，但不会生成文本节点——这类空白在DOM中通常根本不存在
哪些地方的换行/缩进可以安全删掉
页面源码中用于可读性的换行和缩进，只要不在<pre class="brush:php;toolbar:false;"></pre>等特殊上下文里，就属于“无语义空白”，移除后不影响DOM结构和渲染结果。
-
<div><p>foo</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>和换行缩进版效果完全一致 - 标签属性换行（如
<img src="a.jpg" alt="x">）会被解析器当作空格处理，但实际不影响属性值，可连写也可删换行 - 注意：若两个内联元素间有意图保留的空格（如
<span>A</span> <span>B</span>），直接删掉换行+空格会丢失那个分隔空格，需用
为什么正则清理HTML空白容易出错
用preg_replace或字符串替换粗暴处理换行和空格，常因忽略HTML语法结构而破坏内容。比如：
- 误删
<pre class="brush:php;toolbar:false;"></pre>里的换行，导致代码格式坍塌 - 把
<script>console.log("a\nb");</script>中的\n也替换成空格，JS语法就错了 - 匹配
<p>\n\n</p>时没考虑嵌套或属性，删掉<br>或<img>旁边的空白可能影响布局逻辑 - 用
/\s+/全局替换，会把value=" x "这种属性值里的空格也压成一个，虽不影响多数场景，但对某些表单校验或data-*属性可能是问题
white-space属性如何覆盖默认合并行为
默认的空白合并发生在解析阶段，而white-space是在渲染阶段起作用的CSS指令，它不能改变DOM中已压缩的文本内容，但能改变显示方式。
-
white-space: normal（默认）：继续按规则折叠+自动换行 -
white-space: pre：保留所有空白和换行，禁止自动换行（类似<pre class="brush:php;toolbar:false;"></pre>） -
white-space: pre-wrap：保留空白和换行，但允许自动换行——这是最常用也最安全的“保留格式但适配容器”的方案 - 注意：
white-space对<input>、<textarea></textarea>无效，它们的行为由自身机制决定
真正难处理的不是“怎么让浏览器多留空格”，而是理解：空白在解析阶段已被固化，后续所有操作（JS读取、CSS控制、服务端清理）都得基于这个前提做适配。盲目在源码层删空格，不如在需要的地方显式用 或white-space兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
