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"]
}

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)