print html tags in javascript

javascript html printing tags

16,576

Solution 1

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

When the browser encounters < (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.

Solution 2

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;
}

Solution 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.

16,576

Author by

Sagar Hatekar

Random Fact: My name means the Ocean :)

Updated on June 04, 2022

Comments

Sagar Hatekar about 2 years
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.
Pekka about 13 years

The OP is not specifying jQuery, but this is very clever! +1
Christian about 13 years

@Pekka Well, I was typing the pure-javascript implementation, it takes some time :).
Pekka about 13 years

Nice! This is vastly superior to replacing < and >.
Matt Greer about 13 years

yup, this is the better answer for sure
Sagar Hatekar about 13 years

Awesome! Really thanks a TON for that piece of code. That helped!
Matt Greer about 13 years

I recommend following Christian Sciberras's answer, his approach is better.
Sagar Hatekar about 13 years

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 about 13 years

Thanks Christian for an elegant answer!
Ruan Mendes about 13 years

It may be more elegant and maybe more reliable, but it's a lot slower than regular expressions, not saying it's bad, just something to be aware of.
Christian about 13 years

@Juan Mendes - Considering it is more direct than the other approaches, I would argue that is a browser issue. On one browser it might be faster than the other. But then again, some specific browser may as well make use of a lousy implementation of regular expressions, again something one just can't really tell.
Ruan Mendes about 13 years

@Christian: I'm not sure what you mean, what I mean is that this approach requires DOM manipulation which is much slower than string manipulation in any browser.
Christian about 13 years

@JuanMendes - That isn't entirely true. The actual DOM isn't modified, think of it like DOM-on-the fly. Now if actually appended to body and deleted later on, that would be quite slow. But "appending" a text element (one DOM item) and reading it back as html (which is a stored property), makes this more efficient than one expects at a first glance.