3

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.

11
  • 3
    What do you mean by "print" exactly? Print where? Commented Apr 11, 2011 at 20:59
  • 2
    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. Commented Apr 11, 2011 at 21:02
  • 2
    What "practically EVERYTHING" have you tried? Commented Apr 11, 2011 at 21:03
  • 1
    @fredrik: The OP never mentions PHP, he's looking for a JavaScript solution. Commented Apr 11, 2011 at 21:07
  • Hey hey guys! Give me some time to respond to your comments! You can't downvote just like that! It's a valid question! If you don't have the patient to read or understand it - just ignore and move on! Commented Apr 11, 2011 at 21:28

3 Answers 3

12
 data = data.replace(/</g, "&lt;").replace(/>/g, "&gt;");

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.

Sign up to request clarification or add additional context in comments.

4 Comments

Awesome! Really thanks a TON for that piece of code. That helped!
I recommend following Christian Sciberras's answer, his approach is better.
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!
This quick and practical solution of yours has saved me days of work!
10

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");
    div.appendChild(tnd);
    return div.innerHTML;
}

9 Comments

The OP is not specifying jQuery, but this is very clever! +1
@Pekka Well, I was typing the pure-javascript implementation, it takes some time :).
Nice! This is vastly superior to replacing < and >.
yup, this is the better answer for sure
Thanks Christian for an elegant answer!
|
3

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

var data = "<html> <head> <title> Hello </title> </head> <body> Hello Body </body> </html>"
    .replace(/&/g,'&amp;')
    .replace(/</g,'&lt;')
    .replace(/>/g,'&gt;');

document.write(data);

Of course creating a little helper function would be better.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.