Question

如何在javascript中逐行读取文件并在不同的HTML标记中显示每一行？例如，我想将文件的每一行存储在不同的<li>标记中。

这是我到目前为止所尝试的内容，但它只是将整个文件显示为整体。我希望每一行都在不同的标签中：

 <embed src="C://whatever.txt">

还尝试了以下代码，但是将所有内容放在同一行，而不是放在不同的<li>标记中，只是在一个中：

    window.onload = function() {
    var ul = document.getElementsByTagName('ul')[0];

    function readTextfile() {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status == 200) {
                    showContents(xhr.responseText, xhr);
                }
            }
        }

        xhr.open('GET', "C://whatever.txt", true);
        xhr.send();
    }

    function showContents(responseText) {
        var li = document.createElement('li');
        var date = new Date();
        li.innerHTML = date + ': ' + responseText;
        ul.appendChild(li);
    }

    readTextfile();

Answer 1

更改此行：

bytes

到此代码：

showContents(xhr.responseText, xhr);

这会将文件拆分为一个行数组。然后循环遍历每一行，并使用现有的var lines = xhr.responseText.split('\n'); for (var i = 0; i < lines.length; i++) { showContents(lines[i]); }函数在<li>元素内部进行渲染。

此外，我会将showContents更改为innerHTML，以免您意外导致XSS漏洞。

使用javascript在HTML中逐行显示文件

1 个答案: