Encode HTML entities with jQuery

Hey folks,

just a quick tip, if you ever need to use something like PHP's htmlentities() function in JS and happen to use the excellent jQuery library, here is how to do it:

$('<div/>').text('This is fun & stuff').html(); // evaluates to "This is fun & stuff"

Enjoy the magic,
-- Felix Geisendörfer aka the_undefined

&nsbp;

You can skip to the end and add a comment.

SeanG said on Aug 06, 2007:

This was very helpful!! Thanks!! :-)

Sean

trice22 said on Jul 04, 2008:

Neat! Thanks a bunch.

wt? said on Jul 14, 2008:

what if I need something simple like

htmlEncode('thisdf oeo 3r2o32o3');?

Jim said on Jul 29, 2008:

Use the same call he made above, just slam your text or variable in to this text. It will not modify the div in any way, just output data html entity encoded.

Henrik N said on Sep 24, 2008:

Thanks a lot! Helped me fix an issue.

sandip said on Oct 01, 2008:

how i will use this progressbar in symfony 1.0

bye
thanks

Viktar said on Oct 13, 2008:

What is $('<div/>')? Is it some kind of virtual element? I evaluated in firebug console $('<div/>').text('something') and it changes value of div. The question is: What is this div?

Felix Geisendörfer said on Oct 13, 2008:

Viktar: It's an element not attached to the document tree. Until you attach it to an existing element it pretty much is isolated from anything else.

Viktar said on Oct 13, 2008:

Thank you. Great post. Now, when you explained, I found documentation about this on jquery web site.

andrew wooldridge said on Oct 23, 2008:

this was a life saver! Thanks!

Viktar said on Nov 03, 2008:

Looks like this method doesn't work 100% correct in IE (Firefox is fine). I am using this method to encode textarea value. In some cases it replaces \r\n\t with \t\t\t. In other words it replaces new lines characters with tab. So, ended up using this:

function htmlEncode(s) {
var str = new String(s);

str = str.replace(/&/g, "&");

str = str.replace(/ str = str.replace(/>/g, ">");

str = str.replace(/"/g, """);

return str;

}

M said on Dec 04, 2008:

What if I want to encode the value of an input element?
$('#element_id').val().html() doesn't work.

J said on Jan 13, 2009:

M:
var str=$('#my_input').val();

$('#element_id').text(str);

NR said on Aug 25, 2009:

The inverse works:
$('<div/>').html('check & see if X<Z...').text();

MW said on Sep 17, 2009:

Be careful using this. Whenever you use jQuery's function .html(val)
with val coming from user input, you will be introducing xss vulnerability as it will be evaluated if there are any script tags.

I'm not totally sure if this function will have issues because you are taking the text element which will encode < from the string, however the reverse function is definitely vulnerable as I am in the process of fixing it for my site.

This post is too old. We do not allow comments here anymore in order to fight spam. If you have real feedback or questions for the post, please contact us.

debuggable