时间戳

首页 > 解决方案 > 将数组（从文本文件读取和处理）元素显示到 JavaScript 中的新行

javascript - 将数组（从文本文件读取和处理）元素显示到 JavaScript 中的新行

问题描述

我有下面的代码，用户可以上传文本文件。我尝试在div使用@拆分字符拆分后显示输出。存储在变量中的数组元素在新行 in 中正确显示，alert但在单行 in 中打印div。

  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }
    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;
    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
	  	var test = evt.target.result;
		var htmlstring = test.split('@');
		var data = htmlstring.join('\r\n');
        document.getElementById('byte_content').textContent = data;
		alert(data); //with line-break
		alert(htmlstring); // without line-break
      }
    };
    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
 
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button>entire file</button>
</span>
<div id="byte_content"></div>

文本文件数据：

this is some text @2135311 164 @df fdg

电流输出：

this is some text 2135311 164 df fdg

期望的输出：

this is some text 
2135311 164 
df fdg

标签： javascripthtml

解决方案

您需要在 HTML 中呈现数据而不是纯文本：
而不是\r\n使用<br>.
而不是.textContent使用innerHTML

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

演示

function readBlob(opt_startByte, opt_stopByte) {

  var files = document.getElementById('files').files;
  if (files.length < 1) {
    alert('Please select a file!');
    return;
  }
  var file = files[0];
  var start = parseInt(opt_startByte) || 0;
  var stop = parseInt(opt_stopByte) || file.size - 1;
  var reader = new FileReader();

  // If we use onloadend, we need to check the readyState.
  reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
      var test = evt.target.result;
      var htmlstring = test.split('@');
      var data = htmlstring.join('<br>');
      document.getElementById('byte_content').innerHTML = data;
      alert(data); //with line-break
      alert(htmlstring); // without line-break
    }
  };
  var blob = file.slice(start, stop + 1);
  reader.readAsBinaryString(blob);
}
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
  if (evt.target.tagName.toLowerCase() == 'button') {
    var startByte = evt.target.getAttribute('data-startbyte');
    var endByte = evt.target.getAttribute('data-endbyte');
    readBlob(startByte, endByte);
  }
}, false);
#byte_content {
  margin: 5px 0;
  max-height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}

#byte_range {
  margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" id="files" name="file" /> Read bytes:
<span class="readBytesButtons">
  <button>entire file</button>
</span>
<div id="byte_content"></div>

推荐阅读