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

-1

如何在javascript中按行讀取文件並在不同的HTML標記中顯示每行？例如，我想將文件的每一行存儲在不同的<li>標記中。在HTML中使用javascript逐行顯示文件

這是我到目前爲止所嘗試的，但它只是顯示整個文件。我想在不同的標籤中的每個行：

<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();

來源

2017-06-26 Kann

可能重複[Javascript - 讀取本地文本文件]（https://stackoverflow.com/questions/14446447/javascript-read-local-text-file） – evolutionxbox

可能重複的[如何使用Javascript來讀取本地文本文件並逐行閱讀？]（https://stackoverflow.com/questions/23331546/how-to-use-javascript-to-read-local-text-file-and-read-line-by-line） – InvincibleM

@InvincibleM我問如何在不同的HTML標籤中顯示它們，所以它不是重複的 – Kann

改變這一行：

showContents(xhr.responseText, xhr);

要將此代碼：

var lines = xhr.responseText.split('\n'); 
for (var i = 0; i < lines.length; i++) { 
    showContents(lines[i]); 
}

這會將文件拆分爲一行數組。然後遍歷每行，並使用您現有的showContents函數在<li>元素內呈現。

此外，我會將innerHTML更改爲textContent，以便您不會意外誘發XSS漏洞。

來源

2017-06-26 17:23:48 styfle

正是我所需要的。謝謝！ – Kann

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

回答

相關問題