Pre标签内代码复制时空格过多怎么办？

关于<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;/code&gt;标签内代码复制空格问题的解决方法&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;在复制&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签中的代码时，经常会遇到空格过多导致代码格式错乱的问题。这通常是因为使用了&lt;code&gt;html()&lt;/code&gt;方法获取代码内容，该方法会保留HTML标签中的所有空格和换行符，导致浏览器渲染时出现多余空格。&lt;/p&gt; &lt;p&gt;&lt;strong&gt;问题描述：&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;许多开发者使用&lt;code&gt;textarea&lt;/code&gt;元素结合&lt;code&gt;document.execCommand('copy')&lt;/code&gt;实现代码复制功能。然而，如果使用&lt;code&gt;html()&lt;/code&gt;方法获取&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签内容，复制后的代码将包含大量多余空格。&lt;/p&gt; &lt;p&gt;&lt;strong&gt;问题示例代码：&lt;/strong&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;jQuery(document).ready(function($) { var copyid = 0; $('pre').each(function() { copyid++; $(this).attr('data-copyid', copyid).wrap('&lt;div class=&quot;pre-wrapper&quot;/&gt;'); $(this).parent().css('margin', $(this).css('margin')); $('复制代码').insertAfter( $(this) ).data('copytarget', copyid); }); $('body').on('click', '.copy-snippet', function(ev) { ev.preventDefault(); var $copyButton = $(this); $pre = $(document).find('pre[data-copyid=' + $copyButton.data('copytarget') + ']'); if ($pre.length) { var textArea = document.createElement(&quot;textarea&quot;); // ... (其他代码省略) ... textArea.value = $pre.html(); // 这里使用了 .html() 方法 // ... (其他代码省略) ... } }); });</pre>

</div> <p><strong>问题根源：</strong></p> <p><code>$pre.html()方法获取的是包含HTML标签和所有空格的字符串。这些空格在复制到textarea后，会被浏览器解释为多个空格，从而导致代码格式混乱。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情

解决方案：

为了解决这个问题，应该使用$pre.text()方法获取<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>

登录后复制

</div>标签内的文本内容。text()方法会去除HTML标签，只保留文本内容，从而避免多余空格问题。

修改后的代码：

将textArea.value = $pre.html();修改为textArea.value = $pre.text();

通过这个简单的修改，即可确保复制的代码格式正确，避免多余空格的出现。

以上就是Pre标签内代码复制时空格过多怎么办？的详细内容，更多请关注php中文网其它相关文章！