必须用原生childnodes遍历所有文本节点并清洗：先用/\s/.test()判断是否含有效字符，再textcontent.trim()去首尾、replace(/\s+/g,' ')压连续空白为单空格；jquery的.text().trim()会丢失结构和交互。
直接操作 DOM 文本节点才能真正清理 HTML 内容中的冗余空白——用 .text() 或 .html() 读取再写回会破坏结构，white-space: nowrap 只是视觉压制，不改变实际内容。
如何安全遍历并清洗所有后代文本节点
必须用原生 childNodes 遍历（不是 children），因为只有 childNodes 包含文本节点和注释节点；children 会跳过所有非元素节点，导致空格清洗完全失效。
- 对每个
child.nodeType === Node.TEXT_NODE的节点，先用/\S/.test(child.textContent)判断是否含有效字符，避免把换行缩进产生的纯空白节点（如<div>\n \t</div>中的文本）清成空字符串 - 清洗逻辑分两步：
textContent.trim()去首尾，再用.replace(/\s+/g, ' ')把所有连续空白（空格、Tab、换行）压成单个空格 - 不要用
/ +/g，它只匹配 ASCII 空格，漏掉制表符和全角空格；/\s+/g才覆盖完整
为什么不能用 jQuery 的 .text().trim()
$("#container").text() 会把所有子节点文本拼成一个长字符串，丢失原始标签边界和嵌套关系；再 .trim() 后塞回 .html()，等于重写整个 HTML，事件绑定、动态属性、input 的当前值全部丢失。
- 典型误用：
$("#left").html($("#left").text().trim())—— 这会删掉所有<span></span>、<strong></strong>和内联样式 - 如果目标只是提取干净文本用于比对或上报，那可以；但若要保结构、保交互，必须逐节点操作
textContent - jQuery 没有提供递归遍历文本节点的封装方法，底层仍得靠
document.getElementById+ 原生 DOM API
input 输入框自动 trim 的正确绑定时机
对 input[type="text"] 做前后空格清理，blur 是最稳妥的时机；用 input 事件实时 trim 会导致光标跳脱、输入卡顿，尤其在中文 IME 输入时极易崩溃。
- 推荐写法：
input.addEventListener('blur', () => { input.value = input.value.replace(/^\s+|\s+$/g, ''); }); - 正则
/^\s+|\s+$/g中的g实际无效（因为 ^ 和 $ 锚定首尾，只能匹配一次），可省略；但留着也不影响结果 - 注意：该逻辑不处理
textarea和contenteditable元素，它们需单独加监听 - 若服务端强校验，前端 trim 只是体验优化，不能替代后端
trim()
DOM 树里文本节点的空白处理是「可见却不可见」的细节：浏览器渲染时折叠了它，但 textContent 里还躺着它；改错一个正则、漏判一次纯空白节点，就可能让某段落突然消失或单词粘连。动手前先 console.log(node.textContent) 看三眼真实值，比抄代码快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
