Take the 2-minute tour ×

Thanks for reading!

var data = "<html><head><title>Hello</title></head><body>Hello Body</body></html>";

I want to print data including the HTML tags without having the browser rendering the HTML tags and just displaying "Hello Body".

I tried:

str = str.replace("<", "");

but in vain.

share|improve this question
print data to what/where? –  rsplak Apr 11 '11 at 20:59
What do you mean by "print" exactly? Print where? –  Pekka 웃 Apr 11 '11 at 20:59
I think he means write that string to the browser with the tags escaped so they are visible on the page instead of parsed into the DOM. –  Tesserex Apr 11 '11 at 21:02
What "practically EVERYTHING" have you tried? –  Quentin Apr 11 '11 at 21:03
@fredrik: The OP never mentions PHP, he's looking for a JavaScript solution. –  Cory Apr 11 '11 at 21:07

3 Answers 3

up vote 10 down vote accepted

When the browser encounters &lt; (which is known as a character entity), it will replace it with a literal '<', enabling you to display the HTML tags on the page without them getting rendered.

/</g is a regular expression that just says "match all '<' in the string", and g means do it globally. Without the g it will only replace the first '<' it encounters.

And one final note, it's much better to use a library, such as jQuery, to do this. This is the kind of stuff that is easy to get wrong and miss edge cases on. Let the hardened, well tested and secure library function do it for you.

share|improve this answer
+1 for simplicity. –  JClaspill Apr 11 '11 at 21:04
Awesome! Really thanks a TON for that piece of code. That helped! –  Sagar Hatekar Apr 11 '11 at 22:09
I recommend following Christian Sciberras's answer, his approach is better. –  Matt Greer Apr 11 '11 at 22:29
Okay, Matt. Thanks! Yours was the first I tried and it worked. Since I was just using this for debugging, I would use your answer but yes, for a full-fledged product - Christian's answer would be the best pick! –  Sagar Hatekar Apr 11 '11 at 22:48

The actual (and safer fix) is as follows:

function htmlspecialchars(text){
    return jQuery('<div/>').text(text).html();

In pure javascript, that would be:

function htmlspecialchars(text){
    var tnd=document.createTextNode(text);
    var div=document.createElement("DIV");
    return div.innerHTML;
share|improve this answer
The OP is not specifying jQuery, but this is very clever! +1 –  Pekka 웃 Apr 11 '11 at 21:17
@Pekka Well, I was typing the pure-javascript implementation, it takes some time :). –  Christian Apr 11 '11 at 21:24
Nice! This is vastly superior to replacing < and >. –  Pekka 웃 Apr 11 '11 at 21:26
yup, this is the better answer for sure –  Matt Greer Apr 11 '11 at 21:34
Thanks Christian for an elegant answer! –  Sagar Hatekar Apr 11 '11 at 22:48

It's ugly but you could try this (borrowed from Prototype's implementation of escapeHTML()):



Of course creating a little helper function would be better.

share|improve this answer
Thanks Cory! That worked! –  Sagar Hatekar Apr 11 '11 at 22:25

Your Answer


