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或其他行终止符，具体取决于源操作系统。

由于您正在使用该数据覆盖<p>的innerHTML，因此会生成此HTML：

<p>log1
log2
log3</p>

其中\n换行没有意义且无法呈现。

您有两种方法可以实现目标：

重新格式化数据，使其包含＆＃34; HTML换行符＆＃34;。理想情况下，这意味着<p>中包含多个<div>，或者<li>中包含的可能更好的多个<ul>，每行末尾使用<br/>标记是另一种选择。您可以使用正则表达式重新格式化数据，例如input.replace(/^.*$/mg, "<li>$&</li>")为每行创建<li>
使\n换行变得重要。这可以通过指定white-space: preserve CSS属性来实现，该属性默认设置为<pre>标记。

如何使加载的.txt文件包含行之间文本的增量？

1 个答案: