innerText和textContent均会丢失原始空格：前者按渲染结果折叠空白，后者受DOM解析影响致换行被简化为单空格；提取预格式文本应直接读取<code>的textContent并清理首尾空白，普通段落需遍历节点重建换行与空格，复制时用ClipboardItem保持\t\n完整性。
复制网页文字后空格丢失，不是代码写错了，而是浏览器在提取文本时默认执行了“空白折叠”——把连续空格、制表符、换行符全压成单个空格，甚至直接删掉。想保留原始缩进和排版，得绕过 innerText/textContent 的默认行为，手动控制提取逻辑。
为什么 innerText 和 textContent 都会丢空格
innerText 会按渲染结果合并空白：它读的是“人眼看到的文本”，所以 变成普通空格，\t 和多空格全被压平，换行也常被忽略（尤其 Safari）。textContent 看似“原样”，但它仍受 HTML 解析规则影响：元素间的换行在 DOM 树里是独立文本节点，但调用 textContent 时，这些节点内容被拼接，中间只留一个空格；<pre class="brush:php;toolbar:false;"></pre> 里的空格虽保留，但普通 <p></p> 或 <div> 里不会。
<h3>从 <code><pre><code> 提取带缩进的原始文本
如果你的目标是代码块或预格式化内容，必须精准定位到 <code> 元素本身，而不是外层容器：
- 用
codeEl.textContent获取原始字符串，它保留\n和\t - 再用正则清理首尾纯空白行：
codeEl.textContent.replace(/^\s+|\s+$/g, '') - 避免用
innerText—— 它会把制表符转空格，且在 iOS Safari 中可能吞掉所有换行 - 若含 HTML 实体（如
<），先用(new DOMParser()).parseFromString('<', 'text/html').documentElement.textContent解码
普通段落中保留语义空格和换行
对非 <pre> 内容（比如商品描述、文章段落），不能靠“原样提取”，得重建结构：
立即学习“前端免费学习笔记（深入）”；
- 遍历子节点，对每个
<p>、<div style="display: block">节点，在其textContent后手动补\n - 对
<br>节点，插入\n；对连续空白，用.replace(/\s+/g, ' ')压缩为单空格，再还原首行缩进（如开头有 4 个空格，就保留） - 统一清除零宽字符：
.replace(/\u200b/g, '').replace(/\u00ad/g, '')，否则粘贴到某些编辑器里会卡光标或断行异常 - 别信
white-space: pre-wrap的 CSS 渲染效果——它不影响textContent输出，只是控制显示
复制时用 write() 替代 writeText() 保空白完整性
navigator.clipboard.writeText() 会对字符串做 Unicode 规范化，把 \t 当冗余处理，导致缩进塌陷。必须升到 write() + ClipboardItem：
- 构造
new Blob([cleanedString], { type: 'text/plain' })，类型必须是text/plain - 传入
new ClipboardItem({ 'text/plain': blob })，不能用text/html或其他 MIME 类型 - Firefox 116+ 才支持
ClipboardItem，旧版本需降级用writeText()并接受缩进妥协 - 确保
cleanedString里含真实\n和\t，不要用
最易被忽略的一点：即使你提取逻辑完全正确，如果目标编辑器（如 VS Code 默认设置、Word 某些粘贴模式）自身会二次规范化空白，那前端做的所有保留都白费。所以最终是否“看起来没丢空格”，取决于提取 + 复制 + 粘贴三方共同配合，缺一不可。
