convert Html data into text using ejs

Question

I am getting data from a database, and in that data I have found some of the HTML tags in the form of a string, but when I display data to the frontend side I saw HTML tags are also. I want to convert that HTML tags data into there real value using ejs.

my code is -
fetch data -

app.get("/blogs/:id", (req, res) => {
  const requestParams = _.lowerCase(req.params.id);
  blogData.forEach(function (post) {
    const storedTitel = _.lowerCase(post.heading);
    if (storedTitel === requestParams) {
      res.render("blogsfullDetails", {
        date: post.date,
        heading: post.heading,
        subheading: post.subheading,
        discription: post.discription,
        discription2: post.discription2,
        image: post.image,
        image2: post.image2,
      });
    }
  });
});

ejs file -

<div class="blogTitle">
        <p class="date text-center"><%= date %></p>
        <p class="blog-heading text-center"><%= heading %></p>
        <p class="subText text-center"><%= subheading %></p>
        <div class="socialMedia">
          <a href="" target="_blank" ><i class="fa fa-linkedin fa-2x" style="color: #0e76a8 ;" aria-hidden="true"></i></a>
          <a href="" target="_blank" ><i class="fa fa-instagram fa-2x" style="color: #fb3958;"></i></a>
          <a href="" target="_blank" ><i class="fa fa-facebook-square fa-2x" style="color: #4267B2;"></i></a>
        </div>
      </div>
      <div class="blog-main-image" style="background-image: url('<%= image2 %>')"></div>
      <div class="blogText">
       <p><%= discription %></p>
        <div class="blog-main-image" style="background-image: url('<%= image %>')"></div>
      
       <p><%= discription2 %></p>
       
    </div>

frontend image - enter image description here

I know how to convert Html data in text using dangerouslySetInnerHTML in React but don't know how to do it in ejs please help

I'm not sure what EJS or React have to do with this. Does this answer your question? stackoverflow.com/questions/822452/… — isherwood
– isherwood, Commented Aug 27, 2021 at 20:11

ShevchenkoVV · Accepted Answer · 2021-08-27 20:41:08Z

1

Use the <%- html_variable -> syntax instead of <%= variable > , where rendering of raw HTML code is necessary.

UPD: For the security proposes I'd recommend to parse html before using it directly. Check out this tread: What is "Escaped" & "Unescaped" output and read about Cross Site Scripting (XSS) attack.

edited Aug 27, 2021 at 20:41

answered Aug 27, 2021 at 20:34

ShevchenkoVV

1315 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

private name Over a year ago

I got an error [ html_discription2 is not defined ]@ShevchenkoVV

ShevchenkoVV Over a year ago

You just have to left the discription2 there. I called my variable as html_variable just to say that it is different from variable property)

private name Over a year ago

so where I can use html_ in my code @ShevchenkoVV

ShevchenkoVV Over a year ago

There is no special syntax called html_. You just need to replace the <%= ... > to <%- ... > syntax where you need to paste a raw HTML code to make it works.

Sheikh Farid · Accepted Answer · 2022-10-08 17:02:33Z

Install npm i html-to-text backend then

const {convert } = require('html-to-text')

app.get("/blogs/:id", (req, res) => {
  const requestParams = _.lowerCase(req.params.id);
  blogData.forEach(function (post) {
    const storedTitel = _.lowerCase(post.heading);
    if (storedTitel === requestParams) {
      res.render("blogsfullDetails", {
        date: post.date,
        heading: post.heading,
        subheading: post.subheading,
        discription: post.discription,
        discription2: post.discription2,
        image: post.image,
        image2: post.image2,
        convert : convert  
      });
    }
  });
});

then ejs file -

<div class="blogTitle">
        <p class="date text-center"><%= date %></p>
        <p class="blog-heading text-center"><%= heading %></p>
        <p class="subText text-center"><%= subheading %></p>
        <div class="socialMedia">
          <a href="" target="_blank" ><i class="fa fa-linkedin fa-2x" style="color: #0e76a8 ;" aria-hidden="true"></i></a>
          <a href="" target="_blank" ><i class="fa fa-instagram fa-2x" style="color: #fb3958;"></i></a>
          <a href="" target="_blank" ><i class="fa fa-facebook-square fa-2x" style="color: #4267B2;"></i></a>
        </div>
      </div>
      <div class="blog-main-image" style="background-image: url('<%= image2 %>')"></div>
      <div class="blogText">
       <p><%= convert(discription2) %></p>
        <div class="blog-main-image" style="background-image: url('<%= image %>')"></div>
      
       <p><%= convert(discription2) %></p>
       
    </div>

Collectives™ on Stack Overflow

convert Html data into text using ejs

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related