How does jQuery`s .html() work with JavaScript strings?

Question

I have express application, and EJS as view engine. I am trying to set some html to div in 2 different ways:

const attachmentFileNames = '<%= eco.attachmentFileName %>';
if (attachmentFileNames) {
    $("#attachmentFileNameList").html(attachmentFileNames.replace(',', '<br/>'));
}

and

const attachmentFileNames = "<%= eco.attachmentFileName ? eco.attachmentFileName.replace(',', '<br/>') : '' %>";
if (attachmentFileNames) {
    $("#attachmentFileNameList").html(attachmentFileNames);
}

The thing is that first peace of code is working as expected (' ' is treated as line terminator), but the second one just sets all data as a text (' ' is displayed as string).

Could anybody please explain that?

T.J. Crowder · Accepted Answer · 2018-11-05 17:16:48Z

1

It's not jQuery's html function, it's EJS, which is automatically escaping the text produced by your <%= ... %> expression.

In your second example, if you look at the value of attachmentFileNames in the debugger, you'll presumably see   (or  ) instead of  . When you use " " (or " ") as HTML, the result is the characters <, b, r, /, and >:

const attachmentFileNames1 = 'one,two';
if (attachmentFileNames1) {
    $("#attachmentFileNameList1").html(attachmentFileNames1.replace(',', '<br/>'));
}

const attachmentFileNames2 = 'one&lt;br/>two';
if (attachmentFileNames2) {
    $("#attachmentFileNameList2").html(attachmentFileNames2);
}

<div id="attachmentFileNameList1"></div>
<div id="attachmentFileNameList2"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Nov 5, 2018 at 17:16

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How does jQuery`s .html() work with JavaScript strings?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related