javascript - 给pre标签写了一个“复制代码”的功能，但是复制的代码好多空格？

Question

原理是把内容放进<textarea>里然后复制出来，但问题是放进textarea里会把pre中的格式转成很多空格，这个怎么处理下但又不影响之前的格式。

jQuery( document).ready(function($){    var copyid = 0;    $('pre').each(function(){        copyid++;        $(this).attr( 'data-copyid', copyid).wrap( '<div class="pre-wrapper"/>');        $(this).parent().css( 'margin', $(this).css( 'margin') );        $('<button class="copy-snippet">复制代码</button>').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("textarea");            // Place in top-left corner of screen regardless of scroll position.            textArea.style.position = 'fixed';            textArea.style.top = 0;            textArea.style.left = 0;            // Ensure it has a small width and height. Setting to 1px / 1em            // doesn't work as this gives a negative w/h on some browsers.            textArea.style.width = '2em';            textArea.style.height = '2em';            // We don't need padding, reducing the size if it does flash render.            textArea.style.padding = 0;            // Clean up any borders.            textArea.style.border = 'none';            textArea.style.outline = 'none';            textArea.style.boxShadow = 'none';            textArea.style.width='1px'            textArea.style.height='1px'            // Avoid flash of white box if rendered for any reason.            //textArea.style.background = 'transparent';            textArea.style.display='block'            //Set value to text to be copied            textArea.value = $pre.html();            document.body.appendChild(textArea);            textArea.select();            try {                document.execCommand('copy');                $copyButton.text( '已经复制').prop('disabled', true);;            } catch (err) {                $copyButton.text( 'FAILED: Could not copy').prop('disabled', true);;            }            setTimeout(function(){                $copyButton.text( '复制代码').prop('disabled', false);;            }, 3000);        }    });});

Answer 1

$pre.html() 获取的是 html 内容，应该使用 text方法获取文本内容。