Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
use cached DOM elements to escape HTML
function(
a // string to escape
){
return new // create a new
Option(a) // <option> element containing the HTML,
.innerHTML // and return its HTML.
}
function(a){return new Option(a).innerHTML}
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.
{
"name": "escapeHTML",
"keywords": ["escape", "escaping", "HTML", "XSS"]
}
@badboy

This comment has been minimized.

Copy link

badboy commented May 22, 2011

Sure this is right? I don't see c defined.

@jed

This comment has been minimized.

Copy link
Owner Author

jed commented May 22, 2011

forgot to update the annotation, thanks. fixed!

@ZenCocoon

This comment has been minimized.

Copy link

ZenCocoon commented May 22, 2011

Looks like you got an extra '(' line 6 of the annotated source.

@jed

This comment has been minimized.

Copy link
Owner Author

jed commented May 22, 2011

fixed, you guys are awesome.

@ZenCocoon

This comment has been minimized.

Copy link

ZenCocoon commented May 22, 2011

sweet. Thanks for your awesome work !!!

@eligrey

This comment has been minimized.

Copy link

eligrey commented Sep 17, 2011

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

@jed

This comment has been minimized.

Copy link
Owner Author

jed commented Sep 17, 2011

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

@eligrey

This comment has been minimized.

Copy link

eligrey commented Sep 17, 2011

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

@jed

This comment has been minimized.

Copy link
Owner Author

jed commented Sep 17, 2011

keep reading.

@eligrey

This comment has been minimized.

Copy link

eligrey commented Sep 17, 2011

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

@floriancargoet

This comment has been minimized.

Copy link

floriancargoet commented Sep 17, 2011

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

@jed

This comment has been minimized.

Copy link
Owner Author

jed commented Sep 17, 2011

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

@floriancargoet

This comment has been minimized.

Copy link

floriancargoet commented Sep 17, 2011

That'll teach me checking code only in Firefox…

@p01

This comment has been minimized.

Copy link

p01 commented Sep 18, 2011

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

@eligrey

This comment has been minimized.

Copy link

eligrey commented Sep 19, 2011

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

@mathiasbynens

This comment has been minimized.

Copy link

mathiasbynens commented Sep 19, 2011

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)

@jed

This comment has been minimized.

Copy link
Owner Author

jed commented Sep 19, 2011

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

@mathiasbynens

This comment has been minimized.

Copy link

mathiasbynens commented Sep 19, 2011

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?

@subzey

This comment has been minimized.

Copy link

subzey commented Sep 21, 2011

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?

@Daniel-Hug

This comment has been minimized.

Copy link

Daniel-Hug commented Jan 19, 2014

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.