如何使已加載的.txt文件包括行之間的文本增量？

Question

使用以下代碼，我正在將本地文件加載到Web服務器上並將其結果打印到<p>標記中，但是當我加載文件時，它只是將所有文本都轉儲到頁面上，而無需考慮行之間的間隔，它包括單詞之間的空格，但不包括行之間的空格，使它看起來極為混亂且不可讀（作為管理員

setInterval(function readFile() {
    var client = new XMLHttpRequest();
    client.open('GET', '/logs.txt');
    client.onreadystatechange = function() {
    document.getElementById("log").innerHTML = client.responseText;
    }
    client.send();
    }, 1);

有什么辦法可以彌補線之間的差距？

Answer 1

您client.responseText的當前內容類似於以下內容：

log1
log2
log3

換行符是\\n或其他換行符，具體取決於源OS。

由於您要使用該數據覆蓋<p>的innerHTML，因此它會生成以下HTML：

<p>log1
log2
log3</p>

\\n換行符是沒有意義的，不會被渲染。

您有兩種選擇可以實現您的目標：

• 重新格式化數據，使其包含“ HTML換行符”。 理想情況下，這意味着<div> <p>包含多個<p> ，或者<ul>可能包含多個<li>更好。在每行末尾使用<br/>標記是另一種選擇。 您可以使用正則表達式重新格式化數據，例如input.replace(/^.*$/mg, "<li>$&</li>")會為每行創建一個<li>

• 使\\n換行很重要。 這可以通過指定white-space: preserve CSS屬性來實現，該屬性默認情況下為<pre>標簽設置。