Javascript-获取使用FileReader（）读取的文件的格式化预览？

我试图实现一个拖动文件的功能。我需要一个文件的文本预览，在这个例子中是一个HTML文件。但是当我将FileReader的结果插入DOM时，预览会丢失所有的换行符和文本缩进

我尝试使用jQuery.split（）并插入一个

，但文本仍然丢失了所有缩进

for(var i = 0; i <files.length; i++){

    reader = new FileReader();
    reader.onload = function(evt){
        var r = evt.target.result;

        r = r.replace(/>/g,'&gt; >');
        r = r.replace(/</g,'&lt;');
        r = r.split('>')

        var text="";
        for(var i =0; i<r.length; i++){
            r[i] = $.trim(r[i]);
            text += r[i]+'<br/>';
        }
        $('.drop-area').html(text);

    }
    reader.readAsText(files[i]);
}

（变量i=0；i/g，“>”）； r=r.replace（/只需添加到显示框的样式中即可

HTML源中的多个连续空格总是在呈现内容中折叠为单个输出空格。

空白

CSS属性允许您更改此行为，

pre

值表示将空白视为标记所做的（即，显示呈现结果中的所有空白）.

pre-wrap

与

pre

类似，但允许对文本进行包装。

使用插入文本。无需手动转义。若要解决显示问题，请不要尝试在每个结束标记后插入

标记，只需使用适当的CSS: