Please help me understand this line of code?

Question

I've been searching around to determine what this line of code in an application I'm working on does:

var encodedString = $('<div />').text(variableName).html();

I understand that:

Everything to the right of the = sign is assigned to encodedString.
The ('<div />') is a selector, and the <div /> part of that a self-closing tag.
I know that .text(variableName) displays the variableName string in the selected text field, and that .html() returns the html contents of the element.

But put all together, what does the line do? The ('<div />') and the .html() parts totally confuse the whole line for me. Could someone please give me some direction, ideas or explanation?

It seems like a syntax question so I think the rest of the code may be unnecessary, but please tell me if that isn't the case.

This is from an app that I have to edit to fit my needs, so I have to understand the existing code before I can change it.

Thank you for any direction you can provide.

No, `'
'` is not a selector, it _creates_ an empty `div` element. That is then filled with some text, and then the resulting HTML code is read, and assigned to the variable. — CBroe, Apr 20 '15 at 00:54
`console.log(encodedString);` will show what is being assigned to the variable — HorusKol, Apr 20 '15 at 00:55

score 2 · Answer 1 · answered Apr 20 '15 at 00:57

2

Nothing special see the console here: http://jsfiddle.net/nt5q2sfb/

var encodedString = $('<div />').text('bobs').html();

$('<div />') simply creates a div

text('bobs') fills the div with the text 'bobs' or in your case the content of the var passed

The .html() returns the inner html of the div is created to start with.

So the result will be basically whatever is passed to text()

answered Apr 20 '15 at 00:57

You get my vote because you explained the process properly and provided an example. – Darren Apr 20 '15 at 01:00
But failed to mention that the main reason to do this is to escape html in the variable. See my answer below. – tandrewnichols Apr 20 '15 at 01:03
What is the result of filling the div with the text 'bobs'?
bobs
?
– user2980343 Apr 20 '15 at 03:03
Andn what is the inner html of the div? – user2980343 Apr 20 '15 at 03:18

tandrewnichols · Answer 2 · 2015-04-20T01:27:11.147

2

This has the effect of escaping (sanitizing) any html stored in the variable. For instance, if variableName was assigned

"<div>blah</div>"

(but . . . imagine that being something sinister and useful, like a script tag), encodedString will have the value:

"&lt;div&gt;blah&lt;/div&gt;"

(Incidentally, it is not easy to get escaped html to display in stack overflow. Hint: don't try to do it inline.)

edited Apr 20 '15 at 01:27

answered Apr 20 '15 at 00:58

tandrewnichols

3,456
1
28
33

So the purpose of the .html() part of the is process is to change a scripting attack script into something harmless? I have to read up on what happens next with the &lt and &gt added to variableName, because the sanitized string doesn't look too useful as is. – user2980343 Apr 20 '15 at 03:18
It's mostly useful if you're inserting user entered text into the dom and want to prevent them from doing crafty things and inserting a script tag or something like that. Generally speaking, it's good practice not to trust user entered data. – tandrewnichols Apr 20 '15 at 12:17

score 0 · Accepted Answer · edited May 23 '17 at 10:24

The .text(variableName) will set the content of the element to variableName, and the .html() will return that same content.

Perhaps this will help you understand better:

variableName = 'anything';
$('<div />').text(variableName);
var encodedString = $('<div />').html();

It's the same thing.

The detail is that the encodedString will be just text, not HTML. There's a difference between .text() and .html() which you can read more about on What is the difference between jQuery: text() and html() ?

Please help me understand this line of code?

3 Answers3