最安全的方法是遍历文本节点处理：function collapseWhitespaceInTextNodes(node) { if (node.nodeType === Node.TEXT_NODE) { const trimmed = node.textContent.replace(/\s+/g, ' ').trim(); if (trimmed !== node.textContent) node.textContent = trimmed; } else { node.childNodes.forEach(collapseWhitespaceInTextNodes); } }
用 JavaScript 的 replace() 配合正则批量处理
HTML 中多余的空格（比如连续多个空格、换行、制表符混在一起）在渲染时会被浏览器合并成单个空格，但源码里留着会影响可读性或后续解析。直接用 replace() 最快：
htmlString = htmlString.replace(/\s+/g, ' ');这个正则
/\s+/g 匹配所有空白字符（空格、\n、\t、\r）的一个或多个连续出现，并统一替换成单个空格。注意 g 标志不能漏，否则只替换第一个匹配项。
保留 HTML 标签内空格，只清理文本节点
上面的全局替换会把 <pre>、<textarea> 甚至 style 属性里的空格也压扁，这通常不是你想要的。真正安全的做法是只遍历文本节点：
function collapseWhitespaceInTextNodes(node) {
if (node.nodeType === Node.TEXT_NODE) {
const trimmed = node.textContent.replace(/\s+/g, ' ').trim();
if (trimmed !== node.textContent) node.textContent = trimmed;
} else {
node.childNodes.forEach(collapseWhitespaceInTextNodes);
}
}
collapseWhitespaceInTextNodes(document.body);这样能避开标签结构和属性值，只动纯文本内容。如果操作的是字符串而非 DOM，就得先用 DOMParser 解析再遍历，不能硬上正则去“抠标签”。
innerHTML 替换后丢失事件监听器
别写 el.innerHTML = el.innerHTML.replace(...) —— 这会销毁所有子元素，已绑定的事件监听器、表单输入值、自定义属性全都没了。
- 对动态内容，优先用
textContent或遍历修改文本节点 - 若必须重写
innerHTML，确保重新绑定事件或用事件委托 - 特别注意
<input>、<select>等控件，它们的value不等于innerHTML
服务端或构建时批量处理更稳妥
前端 JS 处理是“补救”，真正想一劳永逸，应该在生成 HTML 的环节就控制空格。比如：
- 模板引擎（如 EJS、Nunjucks）开启压缩选项，如
minify: true - Webpack 的
html-webpack-plugin配置minify项 - 用
html-minifier-terser命令行工具处理静态文件：npx html-minifier-terser --collapse-whitespace --remove-comments index.html
最麻烦的其实是嵌套在 style 或 onxxx 属性里的 JS 代码——正则很难安全处理，这类地方建议人工检查或改用外部 CSS/JS 文件。
立即学习“前端免费学习笔记（深入）”；
