Nodejs jade模板传\n的问题

Nodejs jade模板传\n的问题

一开始是用markdown模块，还以为是markdown用错了，但是仔细看发现 传进去去的body 大概是<p>abc\nabc</p>

但是jade模板解析 p!=body 确实 abc abc

\n 被当作了 空格

这要怎么办？

4 回复

Node.js Jade 模板引擎中的换行问题

在使用 Node.js 和 Jade（现称为 Pug）模板引擎时，你可能会遇到一些关于如何正确处理换行符的问题。在你的例子中，<p>abc\nabc</p> 中的 \n 被当作空格处理，而不是换行符。

解决方案

Jade（Pug）模板引擎默认会将 \n 视为普通文本的一部分，而不是作为换行符。你可以通过使用 | 来实现真正的换行，或者使用 != 输出标签内容而不进行转义。

以下是几种可能的解决方案：

  1. 使用 | 实现换行

    在 Jade（Pug）模板中，你可以使用 | 符号来表示一个文本块，并允许换行符正常工作。

    p
  | #{body}

    这里，#{body} 会被插入到 p 标签内，并且 \n 会被正确解析为换行。

  2. 使用 != 输出不转义的内容

    如果你需要输出的内容包含 HTML 标签或特殊字符，可以使用 != 来避免 Jade 对内容进行转义。

    p!= body

    例如，如果你传递的内容是 <p>abc\nabc</p>，那么使用 != 可以确保整个内容被原样输出。

  3. 手动处理换行

    如果你希望在模板中直接处理换行，可以在传递给模板的数据中先进行替换，例如：

    const body = '<p>abc\nabc</p>';
res.render('template', { body: body.replace(/\n/g, '<br>') });

    然后在模板中直接输出：

    p!= body

    这样，\n 就会被替换为 <br>，从而在页面上显示为换行。

示例代码

假设你有一个简单的 Express 应用，并且你想渲染一个包含特殊格式内容的 Jade 模板：

const express = require('express');
const app = express();
const jade = require('jade');

app.set('view engine', 'jade');

app.get('/', (req, res) => {
  const body = '<p>abc\nabc</p>';
  res.render('index', { body: body.replace(/\n/g, '<br>') });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

对应的 Jade 模板 index.jade 文件内容：

doctype html
html
  head
    title Jade Example
  body
    p!= body

这样，当你访问应用的首页时，你会看到 abc 和 abc 分别位于两行。

通过这些方法，你可以更好地控制 Jade 模板中的换行和文本格式。


|!{body} 是什么意思？

试了一下效果一样，但是还是不能认出换行符

Jade 模板引擎（现称为 Pug）在处理字符串时会自动转义 HTML 标签。当你使用 p!= body 这样的语法时，Jade 会将 \n 解释为空格而不是换行符。为了解决这个问题，你可以手动处理换行符，将其替换为 <br> 标签。

以下是一个简单的示例代码来解决这个问题：

// 假设这是你的 Express 路由
app.get('/example', (req, res) => {
  const body = '<p>abc\nabc</p>';
  
  // 替换 \n 为 <br>
  const bodyWithBreaks = body.replace(/\n/g, '<br>');

  res.render('index', { body: bodyWithBreaks });
});

示例模板文件 views/index.pug

doctype html
html
  head
    title Example
  body
    p!= body

这样，在 Jade 模板中，\n 就会被正确地转换为 <br> 标签，从而实现换行效果。

如果你希望保留原始的 HTML 结构并且不希望手动替换 \n，可以考虑使用一个库如 sanitize-html 来更灵活地处理 HTML 内容。

回到顶部