html - Display text file in JavaScript

Question

What code should I use to display the contents of a plain-text .txt file in JavaScript? I want the text to scroll on screen in the active window.

Thanks in advance!

Answer 1

To get the text to display with new lines etc, use a <pre> or a <textarea>, i.e.

<pre id="contents"></pre>

Next is, where is the plain text file?

From a Server

Use XMLHttpRequest

function populatePre(url) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        document.getElementById('contents').textContent = this.responseText;
    };
    xhr.open('GET', url);
    xhr.send();
}
populatePre('path/to/file.txt');

From the local machine

Make the user select the file using an <input type="file" />

<input type="file" id="filechoice" />

Then when the user selects a file, use FileReader to populate the <pre>

document
    .getElementById('filechoice')
    .addEventListener(
        'change',
        function () {
            var fr = new FileReader();
            fr.onload = function () {
                document.getElementById('contents').textContent = this.result;
            };
            fr.readAsText(this.files[0]);
        }
    );