nodejs, jade escape markup

Question

I have an Express app using the default Jade view engine. When I try to render HTML as-is in a <pre> element, it gets rendered as actual DOM elements instead of literal characters.

h1 Code Sample
pre
  code
    <div>some text</div>

Output:

<h1>Code Sample</h1>
<pre>
  <code>
    <div>some text</div>
  </code>
</pre>

How do I escape the HTML so that it gets rendered as follows?

<h1>Code Sample</h1>
<pre>
  <code>
    &lt;div&gt;some text&lt;/div&gt;
  </code>
</pre>

score 23 · Answer 1 · answered Aug 04 '11 at 12:12

23

Jade uses the bang to force unescaped output. So you turn regular output to unescaped output with the following construct: !=
If your content is inside an div tag you could do the following:

div!= content

answered Aug 04 '11 at 12:12

Daniel Baulig

10,739
6
44
43

3

The post is asking how to **escape** html, not unescape. See my answer below. – Raine Revere Jan 27 '14 at 19:15

score 19 · Answer 2 · answered Jul 19 '13 at 11:23

As an addition, here is another use case which you need to consider:

If you are extrapolating the HTML content using the #{...}, it will still give the wrong output. For that use case, you need the !{...} alternative.

So,

div= varname

becomes

div!= varname

And

div #{varname} is extrapolated badly

becomes

div !{varname} is extrapolated perfectly

score 8 · Answer 3 · answered Sep 13 '11 at 10:49

Actually the OP asks for the escaping, not the unescaping. Which I ran into today.

Let assume, that you have varName variable with <b>FooBar</b> content.

Then this template will use the escaped value:

#foobar= varName

so it becomes:

<div id="foobar">&lt;b&gt;FooBar&lt;/b&gt;</div>

If you use the bang operator:

#foobar!= varName

jade won't escape it, so it becomes:

<div id="foobar"><b>FooBar</b></div>

ewiggin · Answer 4 · 2014-01-29T11:06:12.260

3

This is the official way:

code= '<div>This code is' + ' <escaped>!</div>'
<code>&lt;div&gt;This code is &lt;escaped&gt;!&lt;/div&gt;</code>

http://jade-lang.com/reference/#unescapedbufferedcode

edited Jan 29 '14 at 11:06

answered Jan 28 '14 at 17:01

ewiggin

61
6

KISS ftw. Not sure if the author thought this was possible, but it's the best solution here. – DigitalDesignDj Nov 25 '15 at 00:30

score 2 · Answer 5 · answered Jan 27 '14 at 19:13

It's not built in to Jade, but you can do it with a filter:
(This can be added anywhere at the top of app.js.)

require('jade').filters.escape = function( block ) {
  return block
    .replace( /&/g, '&amp;'  )
    .replace( /</g, '&lt;'   )
    .replace( />/g, '&gt;'   )
    .replace( /"/g, '&quot;' )
    .replace( /#/g, '&#35;'  )
    .replace( /\\/g, '\\\\'  )
    .replace( /\n/g, '\\n'   );
}

Then use the 'escape' filter in your jade file:

h1 Code Sample
pre
  code
    :escape
      <div>some text</div>

Output:

<h1>Code Sample</h1>
<pre>
  <code>&lt;div&gt;hi&lt;/div&gt;</code>
</pre>

Source: Embedding escaped code in a Jade template

nodejs, jade escape markup

5 Answers5

Linked