如何在ExpressJS向Pug模板传递含HTML标签的字符串并生效？

这个问题我碰到过不少次，核心原因是Pug的默认插值语法#{...}会自动转义HTML内容，把<br/>这类标签变成实体字符（比如<br/>），所以浏览器只会把它当作普通文本显示。下面是最优的解决方案，分两种场景处理：

1. 内容完全可信（比如自己维护的数据库内容） #

直接使用Pug的不转义插值语法!{...}代替#{...}，它会保留原始的HTML标签，让浏览器正常解析。

修改你的Pug代码：

p | !{obj.text}

这样你的<br/>标签就会被浏览器识别为换行，而不是普通文本了。

2. 内容不可信（比如用户提交的内容） #

如果文本来自用户输入或者其他不可控来源，直接用!{...}会有XSS攻击风险。这时候我们需要先过滤掉不安全的HTML标签，再进行插值。

步骤1：安装HTML过滤库 #

使用sanitize-html库来清理不安全的内容：

npm install sanitize-html

步骤2：在Express中处理文本 #

在路由里先过滤数据库获取的内容，只保留你允许的HTML标签：

const sanitizeHtml = require('sanitize-html');

app.get('/', (req, res) => { 
  // 假设dbText是从数据库取出的原始文本
  const dbText = 'some text <br/> more text <script>alert("恶意脚本")</script>';
  
  // 过滤不安全标签，只保留你需要的（比如br、p、em等）
  const safeText = sanitizeHtml(dbText, {
    allowedTags: ['br', 'p', 'em', 'strong'], // 允许的标签列表
    allowedAttributes: {} // 不允许任何属性，按需添加
  });

  res.render('index', { text: safeText }); 
});

步骤3：Pug中使用不转义插值 #

同样用!{...}来渲染过滤后的安全文本：

p | !{text}

这样既实现了HTML标签的正常解析，又避免了XSS攻击的风险，是更安全的生产环境方案。

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