How can I display html tags inside an HTML document?

You could use some javascript to change elements on the fly.

If you use jQuery:

$( 'pre' ).text( $( 'pre' ).html() );

does the trick.


How about replacing the incoming texts by < and > The tags should be visible in source view, but not "in normal view".


Use the <xmp> tag, e.g.

<xmp>
  <html>
    <body>This is my html inside html.</body>
  </html>
</xmp>

You can also add styles and formatting inside <xmp> as well.


Like mkluwe also said, you should use JavaScript (or a server-side script) to properly escape any user input. Here's another JavaScript function you could try:

String.prototype.escapeHTML = function () {                                        
  return(                                                                 
    this.replace(/>/g,'&gt;').
         replace(/</g,'&lt;').
         replace(/"/g,'&quot;')
  );
};
var codeEl = document.getElementById('test');
if (codeEl) {
  codeEl.innerHTML = codeEl.innerHTML.escapeHTML();
}

I haven't tested this in IE, but it should work there in theory. Here's a page where you can view the results: http://jsbin.com/oruri5/2/edit

Tags:

Html

Pre

Recent Posts