前端实战：用 Fetch 读取 TXT 文件并在网页中显示内容的完整教程（JavaScript 实例）

1. 基础原理与准备

1.1 使用 Fetch API 请求 TXT 文件

在前端开发中，Fetch API 是发起网络请求的核心工具。通过调用 fetch(url)，浏览器会返回一个 Promise，解析后的文本可以通过 response.text() 获取。
本教程聚焦前端实战：用 Fetch 读取 TXT 文件并在网页中显示内容的完整教程（JavaScript 实例），旨在通过逐步示例帮助你建立从请求到渲染的完整能力。

要确保 TXT 文件的服务器正确响应为 text/plain，并且需要关注 跨域资源共享(CORS) 设置，否则浏览器可能会阻止请求。这些因素直接影响数据能否顺利回传到前端页面。

// JavaScript: 使用 Fetch 读取 TXT 文件
async function readTxt(url) {const res = await fetch(url);if (!res.ok) {throw new Error('网络错误：' + res.status);}const text = await res.text();return text;
}

1.2 编码与换行处理

读取到的文本可能包含不同的换行符，通过将换行符转换为 HTML 的
或段落，可以在网页中保持文本原有的排版。

为避免 HTML 注入以及提升可读性，对文本进行简单转义，再将换行符替换为 DOM 节点，通常是一个安全的处理方式。

// 将文本渲染到容器，保留换行
function renderTextPreserveLines(container, text) {container.innerHTML = text.replace(/&/g, "&").replace(//g, ">").replace(/\\r?\\n/g, '
');
}

2. 将 TXT 内容渲染到网页

2.1 创建显示容器和基本样式

在网页中预留一个容器，用来显示 TXT 的文本内容。通过 document.createElement 与 appendChild 将文本节点插入。

为了提升可读性，可为容器添加基本样式，例如 字体、行高、颜色，并保持响应式布局。

/* 示例：简单容器样式，可放在