HTML中“多余空格”需分类处理：源码缩进、文本节点空白、strip_tags残留、input首尾空格，对应不同方案；JavaScript清理文本节点须递归遍历、跳过纯空白、保留语义；PHP用/s+/u正则压缩需注意UTF-8；input用blur事件trim；CSS推荐Flexbox消除inline-block间隙。
HTML 中的“多余空格”不是单一问题，得先分清是哪一类：是源码里标签间的换行缩进、文本节点里的连续空格、strip_tags() 后残留的混乱空白，还是 input 值首尾误粘的空格？处理方式完全不同，硬套一种方案反而会破坏语义或布局。
用 JavaScript 清理指定容器内所有文本节点的空白
适用于动态插入 HTML 后需统一净化文本内容的场景，比如从 CMS 获取富文本、渲染到 #content 区域后做语义级清理。
- 只处理
Node.TEXT_NODE，跳过纯空白节点（如仅含\n\t的缩进），靠/\S/.test(text)判断是否含可见字符 - 对有效文本先
trim()去首尾，再用text.replace(/\s+/g, ' ')把中间所有连续空白（含制表符、全角空格、换行）压成单空格 - 必须递归遍历
childNodes，不能只用querySelectorAll('text')—— 那根本不存在；也不能只操作innerHTML，会销毁事件绑定和 input 值 - 别碰
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<code>内部，它们的空白有语义，这个函数默认不进这些标签，需额外加判断
PHP 中 strip_tags() 后怎么安全压缩空白
常见于 WordPress REST API 返回的 content.rendered，直接 strip_tags() 会留下大量 \n、\t 和段落间空行，填进 <textarea> 就是一团乱麻。
- 必须两步走：
strip_tags($html)→preg_replace('/\s+/', ' ', $text)→trim() - 正则用
/\s+/而不是/ +/，否则漏掉制表符和换行符；也别写成['\s\t\n\r']这种错误语法，PHP 里要写成字符类[\s\t\n\r]或直接用\s（它已包含全部空白） - 如果原始文本中单词间本就该有多个空格（比如对齐需求），这种压缩就不适用；此时应保留原格式，改用 CSS
white-space: pre-wrap渲染 - 注意
mb_系列函数——若文本含中文或 emoji，preg_replace在默认单字节模式下可能截断 UTF-8 字符，建议加u修饰符：/\s+/u
自动 trim 所有 text 类型 input 的值
用户复制粘贴导致 input[type="text"] 值前后带空格，后端校验前没处理，数据库存了带空格的邮箱或用户名，后续比对就失败。
立即学习“前端免费学习笔记（深入）”；
- 监听
blur事件最稳妥：input.addEventListener('blur', () => { input.value = input.value.replace(/^\s+|\s+$/g, ''); }) - 别用
input或change事件——前者太频繁，后者对键盘粘贴不触发；blur是用户明确完成输入并离开时的自然时机 - 选择器要覆盖全面：
input:not([type]), input[type="text"], input[type="search"], input[type="email"]，避免漏掉没写type的老代码 - 正则
/^\s+|\s+$/g比.trim()更兼容旧浏览器，但现代项目可直接用.trim()；注意.trim()不影响中间空格，符合预期
CSS 层面消除 inline-block 或标签间空格
不是“删空格”，而是让浏览器不渲染它。常见于导航栏、图标组等用 display: inline-block 实现的水平排列，标签换行后出现 4px 左右间隙。
- 父容器设
font-size: 0，子元素重置font-size—— 简单直接，但会影响子元素内em单位计算，慎用于嵌套深的结构 - 用 HTML 注释连接标签：
<div>item1<!-- --><div>item2</div>，无副作用，但代码丑，维护成本高 - 改用 Flexbox：
display: flex的父容器天然无视元素间空白，且支持gap精确控制间距，是当前首选 - 绝对不要用负
margin去抵消——间隙宽度受字体、行高影响，不可靠，响应式下极易错位
真正难的从来不是“怎么删”，而是判断“该不该删”：文本节点里的空格可能承载语义，pre 里的换行是内容本身，textarea 的缩进是用户意图。动手前，先看一眼 textContent 和 innerText 的区别，比抄一段正则重要得多。
