复制 code 标签内容多出空格，是因为 html() 方法原样获取缩进和换行；应改用 textcontent 获取纯文本，自动忽略多余空白；若需保留高亮标签，则须先 dom 清洗或正则清理行首空格。
复制 code 标签内容时为什么多出空格？
因为 code 本身不控制空白渲染，它常被嵌套在 pre 或 div 中；而真正导致复制后空格异常的，是获取内容时用了 .html() 方法——它会把标签内所有换行、缩进、空格原样取出来，包括你为排版美观加的 4 个空格缩进和换行符。
textContent 比 html() 更适合复制纯代码
用 textContent 取值能跳过 HTML 标签、只提取真实文本内容，自动忽略源码中因缩进而产生的多余空格和换行。这是最轻量、最可靠的修复点。
- ✅ 正确写法：
textArea.value = $pre[0].textContent; - ❌ 错误写法：
textArea.value = $pre.html();（保留全部空白与标签） - ⚠️ 注意：
textContent会剥离所有 HTML 标签，如果code内有<span class="hl"></span>这类高亮标记，就不再适用——此时得先做 DOM 清洗，再取文本
如果必须用 html()，怎么安全清理空白？
当你要保留部分内联样式（比如语法高亮），又不想带入缩进空格时，就得对字符串做预处理。核心是：移除每行开头的空白，再合并连续空白为单空格（但保留换行）。
- 用正则清除行首空格：
str.replace(/^[\s\uFEFF\xA0]+/gm, '') - 若需进一步压缩中间空格（如多空格分隔符），可补上：
.replace(/\s+/g, ' ')，但慎用——可能破坏 CSS/JSON 等对空格敏感的格式 - 别用
.trim()单独处理，它只去首尾，对行内缩进无效
pre 标签内容顶格写，从源头避免问题
很多空格问题其实在写 HTML 时就埋下了。只要 pre 标签里的代码不是顶格写的，浏览器就会把缩进当内容渲染，复制时自然带过去。
- ✅ 正确：
.container { display: flex; }（.container紧贴<pre class="brush:php;toolbar:false;"></pre>开始标签） - ❌ 错误：在
<pre class="brush:php;toolbar:false;"></pre>后换行 + 缩进 4 格再写代码，那些空格全算进复制内容 - ? 小技巧：编辑器里开“显示空白字符”，一眼就能看出哪些空格是冗余的
真正麻烦的不是复制逻辑本身，而是 HTML 源码里那些看不见的缩进空格——它们混在 pre 和 code 之间，既影响渲染又污染复制结果。修一次结构，比每次复制都加正则更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
