CODEWITHSUNDEEP
javascriptnode.jspug
Wisam Ahmed
Wisam Ahmed

Reputation: 155

Extra characters pushed in while rendering template

I attempted to pass HTML code while rendering a jade template. Although I got the desired HTML code rendered, there are additional Angular Brackets and HTML code that gets rendered.

I want this functionality to work so that I can have my jade templates I use to send emails with, be viewed on the UI.

I have stripped down all additional code and made it pretty straight forward.

view_temp.jade

html
   body
      .container
         #{srcStr}

index.js

router.get('/view', function(req, res, next) {
  res.render('view_temp', {srcStr: '<h3>test</h3>'});
});

view-source:hxxp://localhost:3000/view

<html><body><div class="container"><<h3>test</h3>></<h3>test</h3>></div></body></html>

I would like to understand why the output has been rendered like this <<h3>test</h3>></<h3>test</h3>>

Thanks in Advance!!

Upvotes: 0

Views: 55

Answers (2)

Chetan Naik
Chetan Naik

Reputation: 643

Replace the following code,

html
   body
      .container
         #{srcStr}

to

html
   body
      .container !{srcStr}

The output will be <h1>abc</h1>

Upvotes: 2

Aritra Chakraborty
Aritra Chakraborty

Reputation: 12542

To explain @chetan's answer, According to the documentation,

By default, text at the start of a line (or after only white space) represents an html tag. Indented tags are nested, creating the tree like structure of html.

So in your case, <h3>test</h3> is treated as tag.

<*<h3>test</h3>*> </*<h3>test</h3>*>

So, you instead of putting the #{srcStr} in new line, you should put the #{srcStr} in the same line of .container. And instead of using #{..} you can use the unsafe !{..} to render html as-is.

html
   body
      .container !{srcStr}

Upvotes: 2

Related Questions