June 3, 2020
How to Read Text File in Javascript Line By Line
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <input type="file"> <textarea cols="30" rows="20"></textarea> </div> <script src="script.js"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 |
div { display: flex; flex-direction: column; align-items: center; } textarea { margin-top: 15px; width: 50%; } |
Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
let input = document.querySelector('input'); let textarea = document.querySelector('textarea'); input.addEventListener('change', () => { let files = input.files; if(files.length == 0) return; const file = files[0]; let reader = new FileReader(); reader.onload = (e) => { const file = e.target.result; const lines = file.split(/\r\n|\n/); textarea.value = lines.join('\n'); }; reader.onerror = (e) => alert(e.target.error.name); reader.readAsText(file); }); |