如何在 Node.js Web 页面中正确显示数据库中的多行文本列表

本文讲解如何在 express 应用中将 postgresql（或其他 SQL 数据库）中存储的多条文本记录，以清晰的换行列表形式渲染到 HTML 页面上，解决 n 换行符在浏览器中失效的问题。

本文讲解如何在 express 应用中将 postgresql（或其他 sql 数据库）中存储的多条文本记录，以清晰的换行列表形式渲染到 html 页面上，解决 `n` 换行符在浏览器中失效的问题。

在 Web 开发中，一个常见误区是：开发者习惯性地使用 n（换行符）来分隔多行内容，例如从数据库读取若干文本字段后调用 .join(‘n’)，再通过 res.send() 直接返回。然而，HTML 渲染引擎会忽略纯文本中的 n，将其视为空格处理——最终所有内容仍显示为一行。

要实现在浏览器中“每条数据库记录独占一行”，必须输出符合 HTML 规范的换行标记。最直接有效的方式是使用
标签替代 n：

app.get('/readtext', async (req, res) => {   try {     const result = await client.query("SELECT text FROM document");     const htmlList = result.rows.map(row => `- ${row.text}`).join('<br>');     res.send(htmlList);   } catch (error) {     console.error('数据库查询失败:', error);     res.status(500).send('服务器内部错误');   } });

上述代码不仅将每条文本前添加了 – 符号以模拟项目符号效果，还使用
确保每项在页面中独占一行。访问 /readtext 路由时，你将看到如下渲染效果：

• That the first text from database
• Here is the second one.

⚠️ 注意事项：

• 安全提醒：当前示例未对 row.text 做 HTML 转义。若数据库内容含 , & 等特殊字符，可能引发 xss 或破坏页面结构。生产环境推荐使用 encodeURIComponent + 客户端解码，或更稳妥地采用模板引擎（如 Ejs、Pug）配合自动转义机制；
• 语义化建议：若需真正语义化的列表（如 seo 友好、屏幕阅读器支持），应返回完整 HTML 结构（含
  /
  • ），而非仅靠
    拼接：

    const htmlList = `   <ul>     ${result.rows.map(row => `<li>${escapeHtml(row.text)}</li>`).join('')}   </ul> `;

    其中 escapeHtml 是一个简易转义函数（可基于 he 或 lodash.escape 实现）；

  • 响应类型：res.send() 默认发送 text/html，确保前端无需额外设置 Content-Type；若需兼容 json API 设计，应改用 res.json() 并由前端负责渲染。

  总结：浏览器中换行 ≠ 字符串换行。掌握
  的适用场景、警惕 XSS 风险、并在必要时升级为语义化 HTML 结构，是构建健壮 Web 文本展示功能的关键基础。