0

With pug I am getting the variable back as already escaped html for exampleline one <br>\nline two <br>\n<p> with paragraph </p>

In pug own template I used !{description} which gives me the unescaped html such as line one <br> line two <br> <p> with paragraph </p>

But this is not what I want, I do not want to show the tag in the view and instead I want something like

line one
line two

with paragraph  <!-- this is hard to show -->

I also googled and thought of using jquery like this would work but nope.

        const gd = !{JSON.stringify(description)};
        $('#des').html(gd).text();

the above still shows the tag instead of using it as html.

Does anyone has any idea what how to make this work?

Thanks in advance for any help / suggestions.

Dora
  • 6,776
  • 14
  • 51
  • 99
  • Why not pass the unescaped HTML in the description variable ? – Stephen S Jul 16 '19 at 12:03
  • @StephenS you meant unescape the html from the backend and return to the frontend instead of returning the escape html from the backend? – Dora Jul 16 '19 at 17:12
  • Yeah, would be much simpler that way – Stephen S Jul 16 '19 at 17:18
  • @StephenS thought of trying that as my last choice hahah :| and thought it wouldn't be that complicated for frontend. Guess I am wrong :( – Dora Jul 16 '19 at 17:22
  • @StephenS But what's the reason the frontend isn't working? It's already escaped and inserted into the `jQuery.html()` and I double checked it's a string. Shouldn't that be working fine? – Dora Jul 16 '19 at 17:29

1 Answers1

0

The problem here is that since it is escaped HTML, the browser will render it as such. If you try to do it client-side with jQuery, it expects unescaped HTML as text. If you provide it with escaped HTML it will render as plaintext anyway.

You can however replace the escape values with their respective symbols using some javascript in the Pug file.

div#des!=description.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#039;/g, "'")

A similar question here provides an answer which is used in this case.

Stephen S
  • 3,936
  • 2
  • 23
  • 33
  • I did see that post and used those functions at frontend which doesn't work too. :| but I haven't tried to do it directly like the sample you provided. As no one suggested anything else so I escaped it through backend. I will give this a try in a bit :D – Dora Jul 17 '19 at 17:09