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?

Answer 1

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.

Answer 2

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/