p标签末尾空格视觉无效但影响数据流转，需遍历文本节点用正则/^\s+|\s+$/g清理首尾空白，避免破坏子元素结构。
trim() 不能直接作用于 HTML 段落节点，必须操作其文本内容；段落末尾空格实际是 textContent 或 innerText 的一部分，浏览器渲染时会合并，但 DOM 层仍存在——这会影响复制粘贴、API 提交或服务端解析。
为什么 p 标签末尾空格看起来“没效果”，却要处理？
浏览器默认把连续空白（包括换行、缩进、多个空格）压缩成一个空格显示，所以视觉上你可能看不到“多余空格”。但它真实存在于 DOM 中：
- 用户全选复制
<p>Hello world </p>，粘贴到 Excel 或后台字段里会带尾部空格 - 服务端做字符串比对（如校验“Hello world”是否匹配）时，
"Hello world "≠"Hello world" - 用
textContent获取值后直接提交表单，空格被一并发送 - 某些富文本编辑器或 SSR 渲染逻辑会保留原始空白，导致前后端不一致
如何安全清理 p 元素的首尾空格（保留中间语义空格）
不要用 innerHTML.replace() 直接正则替换，那会破坏子标签结构（比如 <p>Hi <strong>there</strong> </p> 中的空格不能乱删）。正确做法是遍历文本节点：
document.querySelectorAll('p').forEach(p => {
p.childNodes.forEach(node => {
if (node.nodeType === Node.TEXT_NODE) {
const trimmed = node.textContent.replace(/^\s+|\s+$/g, '');
if (trimmed !== node.textContent) {
node.textContent = trimmed;
}
}
});
});
- 只处理
Node.TEXT_NODE，跳过<span>、<em>等元素节点 - 正则
/^\s+|\s+$/g和 input 的 trim 逻辑一致：去开头、结尾所有空白（含\n、\t），中间空格不动 - 加了
if判断避免无意义的 DOM 写入（性能友好）
white-space: nowrap 或 font-size: 0 能不能解决？
不能。这两个 CSS 属性控制的是渲染行为，不是数据清洗：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap只阻止换行，不删除空格字符本身 -
font-size: 0是为消除 inline 元素间间隙设计的，对段落内文本无效，且会干扰可访问性（屏幕阅读器仍读出空格） - 它们都不影响
textContent、innerText或剪贴板内容
真正关键的点是：空格是否参与后续数据流转。如果只是页面展示，浏览器默认行为已足够；一旦涉及复制、提交、比对、导出，就必须在 DOM 层做显式清理——而且得避开子元素，只动纯文本节点。
