Nodejs 当要传一段带标签的字符给express render时候，怎么样之渲染的时候不以字符串显示

Nodejs 当要传一段带标签的字符给express render时候，怎么样之渲染的时候不以字符串显示

如题： res.render( “blog/article”, { content : “<p>测试测试</p>” } );

求教

4 回复

Node.js 当要传一段带标签的字符给Express render时候，怎么样使渲染时不以字符串显示

在使用Express时，有时我们希望将包含HTML标签的字符串传递给模板引擎进行渲染。默认情况下，Express会将这些HTML标签当作字符串处理，并直接输出到页面上。为了正确地渲染HTML标签，我们需要确保在传递给模板时，这些HTML标签不会被转义。

示例代码

假设你有一个简单的Express应用，并且你希望将包含HTML标签的字符串传递给模板进行渲染。

  1. 安装依赖 确保你已经安装了Express和EJS（或其他模板引擎）。

    npm install express ejs

  2. 创建Express应用 创建一个简单的Express应用，并设置视图引擎为EJS。

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

// 设置视图引擎为EJS
app.set('view engine', 'ejs');

// 定义路由
app.get('/', (req, res) => {
  const content = "<p>测试测试</p>";
  res.render("index", { content });
});

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

  3. 创建模板文件 创建一个名为index.ejs的模板文件，用于渲染传递的内容。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <%- content %>
</body>
</html>

解释

在上面的代码中：

  • 我们设置了EJS作为视图引擎，并定义了一个路由来处理根路径/。
  • 在路由处理函数中，我们将包含HTML标签的字符串赋值给变量content。
  • 使用<%- content %>语法在模板中渲染content变量。<%- 表示不转义输出，而<%= 只会输出文本而不渲染HTML标签。

通过这种方式，你可以确保传递给模板的HTML标签能够正确地渲染出来，而不是被当作普通字符串显示。


<%-%> 和 <%=%> 的使用问题？

谢谢，已经知道了

当使用 Express 渲染模板并将包含 HTML 标签的字符串传递给视图时，默认情况下这些 HTML 标签会被转义为对应的实体字符（例如 &lt;p&gt; 会被显示为 <p>）。如果你希望渲染时保留这些 HTML 标签而不被转义，可以使用模板引擎提供的特定语法或选项来告诉它不要转义这些内容。

以下是如何使用 EJS 模板引擎作为示例来实现这一点：

示例代码

首先，确保你的项目中已经安装了 EJS 模板引擎。如果还没有安装，可以通过以下命令安装：

npm install ejs

然后在你的路由处理函数中，将数据传递给视图，并明确指定内容不应被转义：

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

// 设置模板引擎
app.set('view engine', 'ejs');

// 定义一个路由处理函数
app.get('/article/:id', (req, res) => {
    const articleId = req.params.id;
    const content = `<p>测试测试</p>`; // 假设这是从数据库或其他地方获取的文章内容

    // 渲染视图，并将内容传递给视图
    res.render('blog/article', { 
        content: content 
    });
});

app.listen(3000, () => console.log('App listening on port 3000'));

在你的 views/blog/article.ejs 文件中，你可以这样使用内容变量：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章</title>
</head>
<body>
    <%- content %> <!-- 使用 -%> 标签来告诉 EJS 不要转义内容 -->
</body>
</html>

解释

  • 在 Express 中，我们设置 EJS 作为默认的模板引擎。
  • 在路由处理函数中，我们创建了一个包含 HTML 标签的字符串并将其传递给视图。
  • 在 EJS 视图文件中，我们使用 <%- content %> 而不是 <%= content %> 来输出内容。这里 - 符号表示不进行 HTML 转义。

这样，当你访问该路由时，<p>测试测试</p> 就会正确地渲染为带有段落标签的 HTML 文档，而不是简单地显示为字符串。

回到顶部