Escape HTML using jQuery [duplicate]

Question

I came up with a hack to escape HTML using jQuery and I'm wondering if anyone sees a problem with it.

$('<i></i>').text(TEXT_TO_ESCAPE).html(); 

The <i> tag is just a dummy as jQuery needs a container to set the text of.

Is there perhaps an easier way to do this? Note that I need the text stored in a variable, not for display (otherwise I could just call elem.text(TEXT_TO_ESCAPE);).

Thanks!

Answer 1

That's a pretty standard way of doing it, my version used a <div> though:

return $('<div/>').text(t).html(); 

This isn't technically 100% safe though as Mike Samuel notes but it is probably pretty safe in practice.

The current Prototype.js does this:

function escapeHTML() {     return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); } 

But it used to use the "put text in a div and extract the HTML" trick.

There's also _.escape in Underscore, that does it like this:

// List of HTML entities for escaping. var htmlEscapes = {   '&': '&amp;',   '<': '&lt;',   '>': '&gt;',   '"': '&quot;',   "'": '&#x27;',   '/': '&#x2F;' };  // Regex containing the keys listed immediately above. var htmlEscaper = /[&<>"'\/]/g;  // Escape a string for HTML interpolation. _.escape = function(string) {   return ('' + string).replace(htmlEscaper, function(match) {     return htmlEscapes[match];   }); }; 

That's pretty much the same approach as Prototype's. Most of the JavaScript I do lately has Underscore available so I tend to use _.escape these days.