Render a variable as HTML in EJS

Question

I am using the Forms library for Node.js (Forms), which will render a form for me on the backend as so:

var signup_form = forms.create({
    username: fields.string({required: true})
    , password: fields.password({required: true})
    , confirm:  fields.password({
        required: true
        , validators: [validators.matchField('password')]
    })
    , email: fields.email()
});
var signup_form_as_html = signup_form.toHTML();

The final line var signup_var signup_form_as_html = signup_form.toHTML(); creates a block of HTML which looks as such:

<div class="field required"><label for="id_username">Username</label><input type="text" name="username" id="id_username" /></div><div class="field required"><label for="id_password">Password</label><input type="password" name="password" id="id_password" /></div><div class="field required"><label for="id_confirm">Confirm</label><input type="password" name="confirm" id="id_confirm" /></div><div class="field"><label for="id_email">Email</label><input type="text" name="email" id="id_email" /></div>

Basically just a long string of HTML. I then try to render it using EJS and Express using the following code:

res.render('signup.ejs', {
    session: loginStatus(req)
    , form: signup_form_as_html
});

But on rendering the HTML is simply the string that I posted above, rather than actual HTML (and thus a form as I want). Is there any way to make that string render as actual HTML using EJS? Or will I have to use something like Jade?

score 363 · Accepted Answer · edited Sep 02 '20 at 11:42

363

With EJS you can have several tags:

    <% code %>

... which is code that is evaluated but not printed out.

    <%= code %>

... which is code that is evaluated and printed out (escaped).

    <%- code %>

... which is code that is evaluated and printed out (not escaped).

Since you want to print your variable and NOT escape it, your code would be the last type (with the <%-). In your case:

    <%- my_form_content %>

For more tags, see the full EJS documentation

edited Sep 02 '20 at 11:42

Akash Kumar Verma

3,185
2
16
32

answered Apr 26 '12 at 09:09

Jakub Oboza

5,291
1
19
10

Was using the exact module asked here. So pretty lucky :) Thanks – majidarif Jan 08 '15 at 11:33
What can be used for escaping also the " (inverted comma) character? – Victor Sep 09 '19 at 12:00
Is there a way to escape the "#" character? – Scott Jan 01 '23 at 17:11

score 22 · Answer 2 · edited Jan 18 '23 at 17:56

October 2017 update

The new ejs (v2, v2.5.7) development is happening here: https://github.com/mde/ejs The old ejs (v0.5.x, 0.8.5, v1.0.0) is available here https://github.com/tj/ejs

Now with ejs you can do even more. You can use:

Escaped output with <%= %> (escape function configurable)
Unescaped raw output with <%- %>
Newline-trim mode ('newline slurping') with -%> ending tag
Whitespace-trim mode (slurp all whitespace) for control flow with <%_ _%>
Control flow with <% %>

So, in your case it is going to be <%- variable %> where variable is something like

var variable = "text here <br> and some more text here";

score 4 · Answer 3 · answered Aug 20 '18 at 05:48

I had the same issue with rendering the textarea input from from a wysiwyg editor saved as html in my database. The browser will not render it but displayed the html as text. After hours of searching, I found out

<%= data %> escaped data while

<%- data %>left data 'raw'(unescaped) and the browser could now render it.

score 0 · Answer 4 · answered Feb 18 '22 at 08:43

As per the ejs doc

<% 'Scriptlet' tag, for control-flow, no output

<%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it

<%= Outputs the value into the template (HTML escaped)

<%- Outputs the unescaped value into the template

<%# Comment tag, no execution, no output

<%% Outputs a literal '<%'

%> Plain ending tag

-%> Trim-mode ('newline slurp') tag, trims following newline

_%> ‘Whitespace Slurping’ ending tag, removes all whitespace after it

Render a variable as HTML in EJS

4 Answers4

October 2017 update

Linked