纯文本转HTML不丢失格式

抱歉，我无法直接访问外部链接。请您把需要翻译的文本粘贴在这里，我会按照要求将其翻译成简体中文并保留原有的格式。

Source: …

开发者几乎在所有地方都使用纯文本格式，从 API 响应到日志以及用户输入字段。

存储和处理纯文本很简单；然而，这种格式几乎不包含布局或结构信息。这在需要将纯文本显示在 HTML 页面时会带来问题。

• 用户期望换行保持原位，间距保持可读，但浏览器对原始文本的处理方式截然不同。
• 例如，用户将一些段落和日志数据从 Notepad 等文本编辑器复制到基于浏览器的编辑器中。段落可能会合并在一起，因为 HTML 并不把换行视为结构；日志数据也可能会塌缩成一行。

这些问题无处不在，正如你可能亲身体验过的。它们常出现在内容丰富的平台上，例如文档工具和项目管理系统。因此，确保文本编辑器在用户粘贴后仍能保留纯文本的结构至关重要。

本文将探讨格式在转换过程中的破坏原因、HTML 如何解释纯文本，以及你可以使用哪些技术来保护结构。

关键要点

• 纯文本格式简单且通用，但缺乏结构，使得 HTML 转换变得困难。
• 浏览器默认会折叠空白字符，导致纯文本的间距和对齐被破坏。
• HTML 需要使用 <pre>、<br> 和 <code> 等结构元素来保留可读的格式。
• 手动解析可以完全控制纯文本如何转换为 HTML，但需要更多的开发工作。
• WYSIWYG 编辑器通过在粘贴时检测结构，自动完成大多数基本转换任务，从而减少手动工作量。

理解纯文本格式

纯文本提供了一种简单透明的内容存储方式。它仅包含字符，不包含关于字体、样式或布局的元数据。这种简洁性帮助开发者和终端用户使用众多工具进行处理，但在 HTML 转换过程中也会带来挑战。

纯文本格式能（以及不能）表示的内容

纯文本格式存储字母、数字、符号、空格、制表符和换行符。这些字符会完全按照书写的方式出现，因为纯文本不支持样式或布局。由于没有标题或对齐的规则，纯文本文件只包含作者键入的字符。

• 编码 – 纯文本可以使用 ASCII 或 Unicode。

  • ASCII 覆盖基本的英文字符。
  • Unicode 支持多种书写系统、表情符号和符号。Unicode 在转换时很重要，因为浏览器必须正确解释每个代码点。

• 空格 – 在纯文本中，空格是字面意义的。例如，如果文件中显示四个空格，它实际上就包含四个空格字符。除非开发者强制执行空白规则，否则 HTML 不会保留这些字符。

注意： ASCII（American Standard Code for Information Interchange，信息交换标准代码）为英文字母、数字、标点和控制码（制表符、换行符）分配唯一的数字（0–127）。例如，‘A’ 的代码是 65，‘a’ 的代码是 97。
注意： Unicode 在 ASCII 的基础上扩展，为每个字符（包括表情符号和全球各地的文字）分配唯一的编号。它可以容纳超过一百万个代码点，常以 UTF‑8 编码方式存储。

为什么在 HTML 转换时格式会被破坏

保持纯文本格式并不是 HTML 的职责（它确实有一些补救措施，后面会提到）。HTML 的渲染规则源自早期的网页标准，这些标准更关注语义结构而非视觉忠实度。因此，浏览器必须根据 HTML 的布局模型解释空白、换行和特殊字符。

于是会出现以下情况：

1. 空白折叠 – 浏览器会把连续的空格压缩为一个可见空格，制表符也会折叠或转换为少量空格。这会破坏日志或结构化文本的对齐。
2. 换行处理 – \n 等字符 不会 自动生成新段落。必须将它们转换为 <br> 标签或将相应内容包裹在块级元素中。
3. 转义特殊字符 – <、>、&、| 等字符需要进行转义或放入合适的标签中。

由于 HTML 的渲染引擎设计上会折叠空白，你需要显式规则来保留它：

• 使用 <pre> 标签 或 CSS white-space: pre; 来保持字面空格。
• 决定输入的哪些部分需要保持精确对齐，因为保留所有空白可能导致意外的间距、隐藏字符或不一致的缩进。

HTML 如何解释纯文本

HTML 遵循一套控制空白、流动和结构的渲染规则：

• 连续空格 会被忽略，除非文本位于特殊元素（如 <pre>）内部或使用了 white-space: pre 样式。
• 块级元素（例如 <p>、<div>）决定文本的呈现方式。若没有块级元素，浏览器会把纯文本视为一个连续块。
• 换行 只有在使用 <br> 标签或通过 <pre> 保留时才会出现。
• 制表符 在不同浏览器中的表现不一致；有的把它视为单个空格，有的则视为多个空格。

保持纯文本结构的技术

手动解析（完全控制）

function plainTextToHtml(text) {
  // Escape HTML special characters
  const escaped = text
    .replace(/&/g, '&')
    .replace(/</g, '>');

  // Convert line breaks to <br>
  const withBreaks = escaped.replace(/\r?\n/g, '<br>');

  // Optionally wrap in <pre> for exact spacing
  return `${withBreaks}`;
}

• 优点： 完全控制每个字符的处理方式。
• 缺点： 开发工作量更大；需要自行处理各种边缘情况（例如代码块与普通文本的区别）。

使用 <pre> 包裹整个块

<pre>
Your plain‑text content goes here.
    Indentation and spacing are preserved.
</pre>

• 优点： 简单；自动保留空白字符。
• 缺点： 可能会使用等宽字体并保留 所有 空白，这并不总是所需的。

CSS white-space 属性

<div class="preserve">
  Your plain‑text content with   multiple spaces.
</div>

<style>
.preserve {
  white-space: pre-wrap; /* preserves spaces & wraps long lines */
}
</style>

• 优点： 在保持正常文档流的同时保留空格和换行。
• 缺点： 仍需对 HTML 特殊字符进行转义。

利用所见即所得编辑器

许多现代编辑器（例如 TinyMCE、CKEditor、Quill）会自动：

• 检测换行并插入 <br> 或 <pre> 标签。
• 将粘贴的代码块转换为 <code> 结构。
• 转义危险字符。

实现技巧： 启用许多编辑器提供的 “粘贴为纯文本” 或 “保留格式” 插件。

选择合适的方法

概述

• 纯文本是通用的，但缺乏 HTML 所需的结构线索。
• 浏览器会折叠空白并忽略换行符，除非你明确指示它们如何渲染文本。
• 使用 <pre>、CSS white-space、手动解析或所见即所得编辑器来保留格式。
• 选择符合产品需求的技术——无论是需要严格保真（日志、代码）还是语义化、可读的 HTML（文章、文档）。

通过了解纯文本的局限性和 HTML 的期望，你可以可靠地保留用户的原始格式，并在各浏览器中提供一致、易读的体验。

Source: …

将纯文本转换为 HTML 的常用开发者技术

将纯文本内容转换为 HTML 有许多可靠的方法。没有单一方法能适用于所有场景，因此请根据内容类型和项目需求进行选择。你甚至可以组合多种技术，以实现更分层的处理方式。

使用自定义逻辑手动转换

自定义逻辑将纯文本视为 字符流 而不是内容块。通常的步骤是：

1. 按行读取文本。
2. 决定每一行如何映射到 HTML（例如，空行 → 段落换行，以连字符开头的行 → 列表项）。

这些规则遵循结构化的过程：

• 检测模式 – 识别标题、列表、代码块等。
• 分配含义 – 决定每种模式对应的 HTML 元素。
• 用 HTML 包裹 – 输出相应的标签。

提示： 转换为 HTML 时，首先对特殊字符进行转义，这样解析器永远不会把用户文本误认为实际的标记。请在应用任何结构规则之前，将 <、> 和 & 替换为它们的 HTML 实体。

优点

• 完全控制用户文本如何变为 HTML。
• 输出可预测，能够精确匹配项目需求。

缺点

• 必须在代码中定义全部结构和转换逻辑。

使用内置或语言层级工具

许多编程语言自带帮助函数，能够解决转换的最基本部分。

示例 – 防止 XSS

$raw = "alert('XSS')";
$safe = htmlspecialchars($raw, ENT_QUOTES, 'UTF-8');
// $safe => "<script>alert('XSS')</script>"

局限性

• 这些工具无法处理高级格式（例如保留多个空格、制表符或自定义缩进）。
• 对于多空格缩进或制表符规范化等需求，仍可能需要自定义逻辑。

使用 <pre> 与基于 CSS 的保留

当精确对齐很重要——比如日志、堆栈跟踪或配置文件——可以将内容包裹在 <pre> 标签中：

<pre>
    line 1
        line 2 (indented)
</pre>

• 浏览器会保留每个空格、制表符和换行。
• 通过 CSS 添加 white-space: pre-wrap; 可以在窄布局中换行，同时仍保持空白字符。

缺点： <pre> 保留视觉格式，但 不传达语义结构（没有段落、列表、标题等）。当可读性依赖固定间距而非文档层次时使用它。

先转换为 Markdown 再转换为 HTML

纯文本往往已经类似 Markdown（例如使用短横线表示列表项）。你可以：

1. 将常见模式映射为 Markdown 标记。
2. 将结果交给 Markdown 解析器，生成干净的 HTML。

优势

• 利用已有的、经过充分测试的解析器。
• 能优雅处理混合输入——解析器会忽略它们无法解释的部分。

弱点

• 对于不类似 Markdown 的输入（如原始日志文件）没有任何帮助。
• 偶然出现的 Markdown‑类似符号可能导致意外的格式化。

使用外部库

大多数生态系统都提供将纯文本转换为结构化 HTML 的库。常见特性包括：

• 可配置的段落、缩进、列表和块检测规则。
• 钩子或预处理器，用于在不修改核心库的情况下处理异常模式。
• 对不一致空格、混合编码等边缘情况的处理。

示例

• JavaScript: turndown、marked（配合预处理）。
• Python: mistune、markdown2。
• Ruby: kramdown、redcarpet。

使用所见即所得编辑器

所见即所得的 HTML 编辑器在用户粘贴内容时可以自动完成纯文本到 HTML 的转换。现代编辑器：

• 保留换行符和结构…

• 检测列表标记、缩进或重复的空白字符。

• 提供粘贴处理程序，将纯文本转换为段落、<br> 标签、不间断空格等。

注意： 点击此处 查看如何开始使用将纯文本转换为 HTML 的 WYSIWYG 编辑器实现。

结论

将纯文本转换为 HTML 需要仔细处理：

• 空白 – 在需要的地方保留空格、制表符和换行。
• 编码 – 确保字符正确转义，以避免 XSS。
• 结构 – 将纯文本模式映射到合适的 HTML 元素。

每种技术支持不同的目标：