jQuery get raw text (unescaped) for further parsing via underscore templates

Question

I currently have an html modal block like so:

<div id="modal">
   <div class="header_buttons"></div>
   <p> 
       Are you sure you would like to perform <%= action_name %> 
       on <%= count %> objects?
   </p>
   <div class="footer_buttons">
        <button>Do <%= action_name %></button>
   </div>
</div>

I'd like to parse this content through _.template

$("#modal").html() //-> escapes `<%` 
$("#modal").text() //-> doesn't escape, but doesn't include tags.

My immediate solution is to target each element instead of the whole block so that I can use text() but I'm curious if there's an obvious solution here otherwise?

score 9 · Accepted Answer · answered Aug 10 '12 at 22:15

9

A solution you see a lot is to put HTML embedded templates in script tags, which are not HTML escaped.

So transforming your div into:

<script id="modal" type="text/template">
   ...
</script>

...would make $("#modal").html() return the raw HTML.

Of course if there's some reason you need it to be in a div, then this isn't for you.

answered Aug 10 '12 at 22:15

numbers1311407

33,686
9
90
92

That's the way. I'll delete my answer. – Marcelo De Zen Aug 10 '12 at 22:19
It does need to be a div to trigger the modal but I like it! I wonder how I can use this while making it work with a modal plugin (using bootstrap-modal). – Yuji 'Tomita' Tomita Aug 10 '12 at 22:45
You could just put the templates outside the modal and then render the html in the modal before opening it. `$('#modal').html(rendered).modal()` or something similar. – numbers1311407 Aug 11 '12 at 15:35

score 4 · Answer 2 · answered Aug 10 '12 at 22:04

4

Just use .html(), then search and replace your template tags:

$("#modal").html().replace(/&lt;%=/g, '<%=').replace(/%&gt;/g, '%>');

Here's the fiddle: http://jsfiddle.net/PwL7L/

answered Aug 10 '12 at 22:04

Joseph Silber

214,931
59
362
292

And what happens when the template contains an `id` attribute? – mu is too short Aug 10 '12 at 22:34
I'm using this but converting all `<%` to capture `_` javascript blocks – Yuji 'Tomita' Tomita Aug 11 '12 at 04:07
@muistooshort - Care to explain what you mean by that? How would that affect any of this? – Joseph Silber Aug 12 '12 at 04:39
If the template has an `id` attribute and the template is stored inside a `
`, you'll end up with two elements in the DOM with the same `id` attribute. You now have invalid HTML and you can expect strange things to happen with certain id selectors.
– mu is too short Aug 12 '12 at 04:42
@muistooshort - Oh! That comment should have been on the question, not on the answer... – Joseph Silber Aug 12 '12 at 04:43
Probably should have been on both :) That's one of the reasons that templates always go inside ` – mu is too short Aug 12 '12 at 04:49
@muistooshort - let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15218/discussion-between-joseph-silber-and-mu-is-too-short) – Joseph Silber Aug 12 '12 at 05:30

score 1 · Answer 3 · answered Sep 12 '14 at 04:16

1

_.unescape should help you use div instead of script.

_.unescape($("#modal").html());

answered Sep 12 '14 at 04:16

Ram

91
1
1
6

jQuery get raw text (unescaped) for further parsing via underscore templates

3 Answers3

Linked