像文本编辑器一样在 HTML 中显示原始文本答案

【问题标题】：Displaying raw text in HTML like a text editor像文本编辑器一样在 HTML 中显示原始文本
【发布时间】：2012-04-06 08:40:04
【问题描述】：

我有一个 UTF8 文本字符串，我想根据以下规则在网页的 div（或整个 <body>）中显示：

所有字符都应按字面显示，就像在支持 unicode 的文本编辑器中一样。
不应忽略空格。 TAB 应该缩进一些空格（例如 4 或 8 个）。 LF 应该导致换行。
文本应该自动换行（就像普通的<p> 段落一样，或者在打开自动换行的文本编辑器中）随着文本文件的包含 div 的宽度发生变化.

显然我需要对文本字符串执行一些预处理步骤，然后再将其插入网页（也许我需要将某些字符替换为命名实体&foo;。也许我需要用某个标签包围文本文件, <pre> 等）。

我需要执行哪些预处理步骤才能实现上述目标。如果有多组步骤可以达到上述目的，请以最短/最简单的方式回答。

【问题讨论】：

标签： html unicode utf-8

【解决方案1】：

(1) 和 (3) 实际上非常简单，如果您将文档作为 UTF-8 提供并且您可以支持 IE >= 8。那么就是：

<body style="white-space: pre-wrap">
  (Your String here, '<' and '&' encoded to '&lt;' and '&amp;' respectively)
</body>

white-space CSS 属性是这里的关键。

对于 (2)，您将需要一个预处理步骤（例如 s/\t/ /g）或等到所有浏览器都支持 tab-size。

【讨论】：

【解决方案2】：

一种无需任何预处理的超级简单方法是将其包装在<textarea> 中。

HTML：

<textarea readonly class="code">
 <!DOCTYPE html>
   <html>
     <head>
       <meta charset=utf-8 />
       <title>My Code</title>
     </head>
     <body>
       My Content
     </body>
   </html>
</textarea>

CSS：

 .code {
    border:1px solid;
    width:500px;
    height:200px;
    overflow:auto;
    outline:none;
    resize:none;
  }

但是，这有点不合语义，因为 textarea 用于编辑。不过，如果您不在乎，这是一个很好的解决方案 - 否则，我推荐 Boldewyn's 回答

http://jsbin.com/oxifek/edit#html,live

【讨论】：