JavaScript でテキストファイルを読む
Kushank Singh
2023年1月30日
JavaScript を使用すると、Web ページで要素を動的に読み取って表示できます。このチュートリアルでは、JavaScript でテキストファイルを読み取る方法を学習します。
JavaScript で blob.text() 関数を使用してテキストファイルを読み取る
Blob インターフェースの blob.text() メソッドは、UTF-8 として解釈される blob のコンテンツを含む文字列に解決される promise を提供します。これを使用してローカルファイルを読み取ることができます。
<input> タグを使用して、必要なファイルを選択できます。ファイルを選択した後、blob.text() 関数を使用してその内容を読み取ります。Web ページに出力を表示します。
次のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<title>Read Text File Tutorial</title>
</head>
<body>
<input type="file" onchange="loadFile(this.files[0])">
<br>
<pre id="output"></pre>
<script>
async function loadFile(file) {
let text = await file.text();
document.getElementById('output').textContent = text;
}
</script>
</body>
</html>
上記の例では、タイプ file の入力フィールドを作成しました。これにより、ファイルを入力として指定できます。次に、<pre> タグを指定しました。HTML では、<pre> 要素を使用して、テキストスペース、改行、タブ、および Web ブラウザが無視するその他の書式設定文字を含む書式設定済みテキストのブロックを指定します。JavaScript コードは <script> タグ内にあります。
JavaScript で FileReader インターフェースを使用してテキストファイルを読み取る
FileReader オブジェクトを使用すると、Web アプリケーションは、ユーザーのコンピューターに保存されているファイル（または生データバッファー）の内容を非同期で読み取ることができます。FileReader.readAsText() メソッドを使用してテキストファイルを読み取ります。
例えば、
<!DOCTYPE html>
<html>
<head>
<title>Read Text File Tutorial</title>
</head>
<body>
<input type="file" name="inputFile" id="inputFile">
<br>
<pre id="output"></pre>
<script type="text/javascript">
document.getElementById('inputFile').addEventListener('change', function() {
var file = new FileReader();
file.onload = () => {
document.getElementById('output').textContent = file.result;
}
file.readAsText(this.files[0]);
});
</script>
</body>
</html>