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? https://stackoverflow.com/questions/822452/strip-html-from-text-javascript — isherwood, Aug 27 '21 at 20:11

ShevchenkoVV · Accepted Answer · 2021-08-27T20:41:08.650

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 '21 at 20:41

answered Aug 27 '21 at 20:34

ShevchenkoVV

131
5

I got an error [ html_discription2 is not defined ]@ShevchenkoVV – private name Aug 27 '21 at 21:30
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) – ShevchenkoVV Aug 27 '21 at 21:56
so where I can use html_ in my code @ShevchenkoVV – private name Aug 28 '21 at 10:09
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. – ShevchenkoVV Aug 28 '21 at 10:16

score 0 · Answer 2 · answered Oct 08 '22 at 17:02

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>

convert Html data into text using ejs

2 Answers2