如何通过JavaScript从静态路径获取并展示TXT文件（WordPress环境）

问题背景 #

有一个内容如下的TXT文件：

Test 1 "SCH4U , BSK4U1" test1@gmail.com 12 9:00 - 12:00
Test 2 MPH4U test2@gmaiL.com 10 10:00 - 12:00

需要在WordPress网站中不使用插件，通过代码从固定静态路径自动加载该文件并展示。当前代码依赖手动上传文件，需改为自动加载固定路径的版本。

修改方案 #

原代码用FileReader处理本地上传文件，现在换成Fetch API请求远程文件，同时移除无用的上传表单。以下是修改后的完整代码：

<!-- 用来展示TXT内容的容器 -->
<div id="txtContent"></div>

<script>
// 固定的TXT文件路径
const filePath = 'https://hwdsbcommons.s3.amazonaws.com/wp-content/uploads/sites/16166/2024/05/testtutor.csv_.txt';

// 页面加载完成后自动发起请求
document.addEventListener('DOMContentLoaded', function() {
  fetch(filePath)
    .then(response => {
      // 校验请求状态
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.text();
    })
    .then(text => {
      // 将文本内容渲染到指定容器
      const contentContainer = document.getElementById('txtContent');
      // 把换行转成HTML换行标签，优化可读性
      const formattedText = text.replace(/\n/g, '<br>');
      contentContainer.innerHTML = formattedText;
    })
    .catch(error => {
      // 处理请求错误场景
      const contentContainer = document.getElementById('txtContent');
      contentContainer.innerHTML = `加载文件失败：${error.message}`;
    });
});
</script>

关键修改说明 #

• 移除了手动上传表单，无需用户操作即可自动加载
• 用Fetch API替代FileReader，专门用于请求远程资源
• 绑定DOMContentLoaded事件，确保页面渲染完成后再发起请求
• 增加错误处理逻辑，避免请求失败时页面无提示
• 使用指定容器展示内容，避免document.write覆盖整个页面的问题
• 对文本做简单格式化，将换行转换为<br>标签，提升展示效果

如果需要更美观的展示（比如转为表格），可以进一步解析每行内容生成HTML表格，示例代码如下：

.then(text => {
  const contentContainer = document.getElementById('txtContent');
  // 按行分割并过滤空行
  const lines = text.split('\n').filter(line => line.trim() !== '');
  // 构建表格HTML
  let tableHtml = '<table border="1" cellpadding="8"><thead><tr><th>测试名称</th><th>课程</th><th>邮箱</th><th>时长</th><th>时间</th></tr></thead><tbody>';
  lines.forEach(line => {
    // 匹配带引号的字段和普通字段
    const parts = line.match(/"([^"]+)"|(\S+)/g).map(item => item.replace(/"/g, ''));
    tableHtml += `<tr><td>${parts[0]}</td><td>${parts[1]}</td><td>${parts[2]}</td><td>${parts[3]}</td><td>${parts[4]}</td></tr>`;
  });
  tableHtml += '</tbody></table>';
  contentContainer.innerHTML = tableHtml;
})

内容的提问来源于stack exchange，提问作者Parth Joshi