Node.js展示数据库多行文本列表技巧

本文深入解析了在 Express 应用中将 PostgreSQL 等数据库中的多行文本正确渲染为浏览器可识别列表的核心技巧——直击 `\n` 在 HTML 中失效的常见痛点，手把手教你用 `
` 实现即时换行、用语义化 `

/
• ` 提升可访问性与 SEO，并重点强调 HTML 转义防范 XSS 的关键实践，帮你避开新手陷阱，写出既安全又专业的文本展示逻辑。

本文讲解如何在 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 文本展示功能的关键基础。

  今天关于《Node.js展示数据库多行文本列表技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

  您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

  继续访问