在HTML中显示非格式化文本并添加颜色

Question

我有一个文本文件（例如Gutenberg书）我想动态地在HTML页面中显示。我知道如何使用Javascript加载文件，但我不知道如何正确显示它。简单的document.write-ing它不好，因为它会破坏换行符（也许还有其他东西？）。

我可以将文本放在TextArea中，然后它看起来很好，但我想要更多的东西：能够在文本中以不同的颜色着色特定的字母（例如，将第五个“h”的颜色用蓝色和红色的第七个“h”）。我不认为TextArea可以做到;我想只是用一些div包装字母并使用CSS。

那么，如何将文件中的文本转换为HTML友好的文本？

Answer 1

你可以使用PRE标签，我创建了一个带有示例的jsFiddle - http://jsfiddle.net/X68Af/4/

Answer 2

您可以在CSS中使用white-space: pre或white-space: pre-wrap。如果您在HTML中使用<pre>，请注意它默认情况下将字体设置为等宽字体，这通常对任何普通文本都不好。

但是，如果换行确实相关，则应将<br>或<p>替换为<p>。在大多数遗留文本中，换行符是偶然的，不是必需的。如果它们是必不可少的，那么从逻辑上讲，它们可能表示段落（{{1}}）。