在JavaScript中将数组（从文本文件读取和处理）元素显示为新行

我有下面的代码，用户可以上传文本文件。在使用

@

作为拆分字符进行拆分后，我尝试在

div

中显示输出。存储在变量中的数组元素在

alert

中以新行正确显示，但在

div

中以单行打印

函数readBlob（opt_startByte，opt_stopByte）{
var files=document.getElementById（'files'）.files；
如果（！files.length）{
警报（'请选择一个文件！'）；
返回；
}
var file=files[0]；
var start=parseInt（opt_startByte）| 0；
var stop=parseInt（opt_stopByte）| | file.size-1；
var reader=new FileReader（）；
//如果我们使用onloadend，我们需要检查readyState。
reader.onloadend=函数（evt）{
如果（evt.target.readyState==FileReader.DONE）{//DONE==2
var测试=evt.target.result；
var htmlstring=test.split（'@'）；
var data=htmlstring.join（'\r\n'）；
document.getElementById（'byte_content'）。textContent=数据；
警报（数据）；//带换行符
警报（htmlstring）；//不换行
}
};
var blob=file.slice（开始、停止+1）；
reader.readAsBinaryString（blob）；
}
document.querySelector（'.readBytesButtons'）。addEventListener（'click'，函数（evt）{
if（evt.target.tagName.toLowerCase（）=='按钮'）{
var startByte=evt.target.getAttribute（'data-startByte'）；
var-endByte=evt.target.getAttribute（'data-endByte'）；
readBlob（起始字节，结束字节）；
}
}，假）；

#字节内容{
保证金：5px0；
最大高度：100px；
溢出y：自动；
溢出x：隐藏；
}
#字节\范围{margin top:5px；}

读取字节：
整个文件

只需将

div

替换为

textarea

标记，即可显示内容，工作正常。

您需要以HTML而非纯文本呈现数据：
不要使用

\r\n

而使用

使用

innerHTML

读取字节：
整个文件

Off-topic：您正在加载jQuery，但仍在做很多事情。您可以查看ID和类选择器以及

attr（）

方法，它们大大简化了代码。在我看来，您只是在字符串之间添加了回车符和换行符，然后才显示到HTML中。如果您查看源代码，我想您会发现它在HTML中的显示与您预期的一样。您可以在其周围放置一个标记，也可以修改联接以包含一个
标记。@Tom，尝试过，但没有成功。

var data = htmlstring.join('<br>');
document.getElementById('byte_content').innerHTML = data;