Nodejs 请问jade如何将字符串转换为标签输出

Nodejs 请问jade如何将字符串转换为标签输出

比如一篇文章以字符串形式存在数据库中 node读出来用jade渲染时候 怎样才能不直接输出字符串 而是输出标签呢?

比如

{
  content:"<h1>你好</h1><p>Hello</p>"

｝

    #cont  =content

这样显示不出来

3 回复

当然可以！在 Node.js 中使用 Jade（现在称为 Pug）时，如果你有一个包含 HTML 标签的字符串，并希望将其作为标签而不是纯文本输出，你需要使用 !{variable} 语法来转义变量内容。这样，Jade 就不会对内容进行自动转义，而是将其作为 HTML 进行解析。

下面是一个具体的示例：

示例代码

假设你有如下数据结构：

const article = {
  content: "<h1>你好</h1><p>Hello</p>"
};

你可以创建一个简单的 Jade/Pug 模板文件 template.pug 如下：

doctype html
html
  head
    title 文章内容
  body
    #cont!= content

注意这里我们使用了 != 而不是 =。!= 会告诉 Jade 不要转义内容，而是将其作为 HTML 解析。

解释

  • !=：这个语法用于输出未转义的内容。Jade 会将 content 变量中的 HTML 字符串解析为实际的 HTML 标签。
  • = variable：如果使用 =，Jade 会自动转义变量内容，使其成为纯文本输出，而不是 HTML 标签。

渲染模板

在你的 Node.js 应用中，你可以这样渲染模板：

const jade = require('pug');
const fs = require('fs');

// 读取模板文件
const template = fs.readFileSync('./template.pug', 'utf8');

// 渲染模板
const html = jade.compile(template)({ content: article.content });

console.log(html);

输出结果

当你运行这段代码时，你会得到以下 HTML 结果：

<!DOCTYPE html>
<html>
  <head>
    <title>文章内容</title>
  </body>
    <div id="cont">
      <h1>你好</h1>
      <p>Hello</p>
    </div>
  </body>
</html>

这样，你就可以正确地将包含 HTML 标签的字符串作为标签输出到页面上了。


通过http://cnodejs.org/topic/5055dcd598ee09042005b228 找到解决办法了 直接 !=content 就可以了…

在Jade（现称为Pug）模板引擎中，默认情况下会自动转义HTML内容以防止XSS攻击。如果你想输出一个包含HTML标签的字符串，可以使用!{variable}语法来禁用自动转义。

以下是具体的示例代码：

// 假设你在Node.js后端有如下数据
const data = {
  content: "<h1>你好</h1><p>Hello</p>"
};

// 在Jade/Pug模板中
#cont !=content

在这个例子中：

  • !=content 表示不进行转义直接输出变量 content 的值。
  • 如果使用 #{content}，则会将HTML标签当作普通文本输出，不会解析为HTML标签。

示例代码

假设你的Node.js服务器代码如下：

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

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

app.get('/', (req, res) => {
  const data = {
    content: "<h1>你好</h1><p>Hello</p>"
  };
  res.render('index', data);
});

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

然后你的 views/index.pug 文件内容如下：

html
  body
    div#cont !=content

这样，当访问该路由时，页面将正确显示 <h1> 和 <p> 标签，而不是将它们当作纯文本显示。

注意事项

  • 使用 != 输出未转义的HTML内容可能会带来安全风险，确保内容来自可信的数据源。
  • 如果内容是用户提交的，建议先对内容进行安全处理，例如使用白名单过滤或类似的安全措施。
回到顶部