2016-04-06 11 views
0

HTML5とJavaScriptを使用してテキストファイル(ログファイル)を読み込もうとしていますが、テキストの解析や書式設定ができません。JavascriptとHTMLでFileReaderを使用してローカルテキストファイルを解析/書式設定5

ログファイルをGeditやSublime Textのようなテキストエディタで開くと、すべての書式が正しく表示されます。しかし、HTML文書を使って画面上にテキストを表示すると、テキストに順序はありません。問題は改行によるものだと思います...改行をどのように強制することができますか?ここで

はコードです:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es"> 
<title>Leer archivo de texto</title> 

<style> 
div { 
margin-top: 30px; 
border: solid 1px black; 
padding: 5px; 
} 
</style> 

<script> 

function processFiles(files) { 
var file = files[0]; 

var reader = new FileReader(); 

reader.onload = function (e) { 
// Cuando éste evento se dispara, los datos están ya disponibles. 
// Se trata de copiarlos a una área <div> en la página. 
var output = document.getElementById("fileOutput"); 
output.textContent = e.target.result; 
}; 
reader.readAsText(file); 
} 

</script> 
</head> 

<body> 
<input id="fileInput" type="file" size="50" onchange="processFiles(this.files)"> 
<div id="fileOutput"></div> 
</body> 
</html> 

messy text

Text well formatted using in a text editor

そんなにみんなありがとう。

答えて

0

は、私はあなたが

+0

がすっごくありがとうございました多くのためhttps://developer.mozilla.org/en-US/docs/Web/CSS/white-spaceを参照してくださいwhite-space: pre-line

<div id="fileOutput" style="white-space: pre-line;"></div> 

とスタイリングで後にしているものを達成できると信じて!それは働いている! – Gera

+0

喜んでそれは助け:) – tyler

関連する問題