如何在 express 和 ejs 博客应用程序中呈现 html 标签？答案

【问题标题】：How can I render html tags in an express and ejs blogging application?如何在 express 和 ejs 博客应用程序中呈现 html 标签？
【发布时间】：2020-03-09 04:56:42
【问题描述】：

我正在使用 Express、EJS 和 MongoDB 开发博客应用程序。

在我的posts.js 控制器中，我有：

exports.getSinglePost = (req, res) => {
    let id = req.params.id;
    Post.findById(id, function(err, post){
        if(err){
            console.log('Error: ', err);
        } else {
            res.render('singlepost', {
                website_name: 'MEAN Blog',
                post: post
            });
        }
    });
};

singlepost.ejs 视图有代码：

<header class="masthead" style="background-image: url('assets/images/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="site-heading">
            <h1><%= post.title %></h1>
            <span class="subheading"><%= post.short_description %></span>
          </div>
        </div>
      </div>
    </div>
  </header>

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <%= post.full_text %>
        </div>
    </div>
</div>

只要帖子集合中的条目不包含 HTML 标签，它就可以正常工作：

{ "_id" : ObjectId("5e3063dbfa749d9229bab26f"), "title" : "Post One", "short_description" : "Lorem ipsum dolor sit amet.", "full_text" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}

但是当它确实包含HTML标签时：

{ "_id" : ObjectId("5e317594fa749d9229bab271"), "title" : "Post One", "short_description" : "Dolor sit amet.", "full_text" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"}

singlepost 视图在浏览器中呈现 HTML：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

在 AngularJS 中，使用 ng-bind-html 可以轻松解决问题，但我不在这个项目中使用 AngularJS。

那么，我该如何修复 EJS 中的这个错误？

【问题讨论】：

查看这个答案stackoverflow.com/questions/51407713/ejs-rendering-html

标签： node.js express ejs

【解决方案1】：

您使用以下代码：

Post.findById(id).then(post=> res. render('singlepost', {post:post})). catch (err=>console.log(err));

然后你记录任何帖子属性

【讨论】：

【解决方案2】：

我通过将<%= post.full_text %> 替换为<%- post.full_text %>（= 替换为-）解决了这个问题。

singlepost 的视图现在是这样的：

<header class="masthead" style="background-image: url('assets/images/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="site-heading">
            <h1><%= post.title %></h1>
            <span class="subheading"><%= post.short_description %></span>
          </div>
        </div>
      </div>
    </div>
  </header>

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <%- post.full_text %>
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

<p><%- post._id %></p>

我认为你可以做这样的事情，而不是你目前正在做的事情。但是直接渲染标签是不行的。

【讨论】：