How to make Jade stop HTML encoding element attributes, and produce a literal string value?

Question

UPDATE Jade v0.24.0 fixes this with a != syntax for attributes. option(value!='<%= id %>')

I'm trying to build an <option> with jade, where the value of the option is an UnderscoreJS template marker: <%= id %> but I can't get it to work because jade is converting my marker text to <= id >.

Here's my Jade markup:

script(id="my-template", type="text/template")
  select(id="type")
    &lt;% _.each(deviceTypes, function(type){ %>
    option(value='&lt;%= type.id %>') <%= type.name %>
    &lt;% }) %>

I expect it to produce this html:

<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="<%= type.id %>"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>

But what I get instead, is this:

<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="&lt;%= type.id %&gt;"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>

Note the very subtle difference in the <option> line of the output... the value attribute of the option has been HTML encoded.

How do I prevent Jade from HTML encoding this value? I need it to produce the literal value, the same way it does with the text of the option.

I've recently had the same issue with setting attribute values using Underscore and found a work around. Not super-pretty, but it's better than using raw HTML. — AlbertEngelB, Apr 24 '14 at 17:20

score 103 · Answer 1 · answered Oct 03 '12 at 14:07

103

Derick has already mentioned that Jade added new feature for unescape HTML encoding in update, but I'd like to add some addendum for someone who might not recognize.

- var html = "<script></script>"
| !{html} <-- Escaped
| #{html} <-- Encoded

from https://github.com/visionmedia/jade

answered Oct 03 '12 at 14:07

Minime

1,727
2
12
22

1

(! && Minime) made my day :) – Matiss Jul 03 '13 at 14:07
1

According to http://jade-lang.com/reference/code/ !{html} is unescaped and #{html} does convert entities – rndstr Feb 04 '15 at 09:50
This is life saving. – Merhawi Fissehaye Sep 26 '19 at 04:32

score 35 · Answer 2 · answered Jan 10 '13 at 23:48

35

This feature has been added to Jade. You simply use the != operator if you want to unescape attribute values:

script#my-template(type='text/template')
  a(href!='<%= url =>') Clicky clicky...

answered Jan 10 '13 at 23:48

Mike M. Lin

9,732
12
51
60

This works! Doesn't seem to work for class attributes, though. – cgenco Jun 20 '13 at 21:17
@cgenco it should, provided your version of jade > 1.9.2 – Codebling Feb 17 '15 at 20:55
2

I know - [I fixed it](https://github.com/jadejs/jade/issues/1087#issuecomment-20779899) ;) – cgenco Feb 18 '15 at 21:44

score 5 · Accepted Answer · answered Apr 11 '12 at 18:09

5

As of this writing I don't believe there's a way to it. See this issue: https://github.com/visionmedia/jade/issues/198

I ended up dropping into raw HTML to solve it, using the | prefix.

answered Apr 11 '12 at 18:09

Kevin Dente

23,346
7
40
47

2

Thanks, Kevin. Dropping back to | got it working for now ... life on the bleeding edge... :P – Derick Bailey Apr 11 '12 at 18:19
This should not be the accepted answer, see Minime's answer. – CatalinBerta Nov 23 '16 at 11:16

score 0 · Answer 4 · edited May 23 '17 at 12:10

So I was having an issue similar to this, where I wanted to create an Underscore template inside one of my Jade views. A piece of the Underscore template needed to set the selected attribute in an <option> tag.

Initially I tried having Underscore return "selected" or "". Unfortunately, Jade doesn't have a way to display an attribute with no value and doesn't have a way of non-escaping attribute names (the Underscore bits were coming back without quotation marks).

Luckily, you are able to unescape the value of an attribute, preserving the quotation marks.

In this example, I'm selecting a value of a dropdown based on the owner type matching a string value. I set a helper function so I wouldn't have to manually escape quotation marks.

- var checkType = function(type) { return "<%= contact.type == '" + type + "' %>" };

.clearfix
  label Title:
  .input
    select(type="text", name="contact[title]", class="new-title")
      option(value="") Choose Title
      option(value="manager", selected="#{ checkType('manager') }") Manager
      option(value="member", selected="#{ checkType('member') }") Member
      option(value="owner", selected="#{ checkType('owner') }") Owner
      option(value="president", selected="#{ checkType('president') }") President
      option(value="individual", selected="#{ checkType('individual') }") Individual
      option(value="main_contact", selected="#{ checkType('main_contact') }") Main Contact

According to some, you should be able to use !{} here to completely avoid all encoding (<, >, etc.), however this did not work on my version of Jade. I'm using "^0.30" and the current version is 1.x.

If someone can verify that !{} does work in this situation using the latest version of Jade, I'll update my answer.

`!{}` works in pug (jade's new name) in v2.0.0-alpha8 – Varun Chatterji Jun 05 '16 at 07:50 — Varun Chatterji, Jun 05 '16 at 07:50

How to make Jade stop HTML encoding element attributes, and produce a literal string value?

4 Answers4

Linked