use cached DOM elements to escape HTML

annotated.js

function(
  a          // string to escape
){
  return new // create a new
  Option(a)  // <option> element containing the HTML,
  .innerHTML // and return its HTML.
}

index.js

function(a){return new Option(a).innerHTML}

LICENSE.txt

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2011 Jed Schmidt <http://jed.is>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.

package.json

{
  "name": "escapeHTML",
  "keywords": ["escape", "escaping", "HTML", "XSS"]
}

sweet. Thanks for your awesome work !!!

Shaved 73 bytes off your code. https://gist.github.com/1224209

wow, great find, @eligrey. and you can get rid of the closure for 94 bytes total!

"create a new"? No need to split it so extremely.

keep reading.

Also, for your old implementation, you could've set the data property instead of nodeValue. Not that that it's relevant anymore.

function(a){return Option(a).innerHTML} seems to be enough. 4 more bytes saved.

alas, that causes chrome to throw with DOM object constructor cannot be called as a function.

That'll teach me checking code only in Firefox…

The new operator isn't required in Opera either. Oh well!

If you want to also escape double quotes, you could use function(a){return new Audio(a).outerHTML.slice(27,-10)} instead.

Sadly, new Option(a).innerHTML and new Audio(a).outerHTML.slice(27,-10) don’t work in IE < 9; the latter fails in in Firefox 6 as well. Not sure if this is an issue though… Which browsers need to be supported in @140bytes snippets?

(Btw, related @140bytes snippet: https://gist.github.com/989212)

good question, @mathiasbynens... which ones do you think we should target?

I like to keep things challenging, so I’d vote for…

• IE6+
• Latest stable Opera, Firefox, Chrome, and Safari

IMHO only supporting the latest IE release would make things too easy, but that’s just me. What do others think?

My humble opinion: script w/o ie6 is better than no script at all, but script in 140 that supports ie6 is better than one in 140 bytes that doesn't support ie6.
Maybe, non-ie6 scripts should have "ie7+" keyword?

Here's the old version using the textNode's data property instead of nodeValue (browser support IE5+, and everything else):

var escapeHTML = (function() {
    var el = document.createElement('b'),
        textNode = el.appendChild(document.createTextNode(''));
    return function(str) {
        textNode.data = str;
        return el.innerHTML;
    };
})();

Minified (132 bytes):

function(a,b){a=(b=a.createElement('b')).appendChild(a.createTextNode(0))
return function(s){a.data=s
return b.innerHTML}}(document)