944,028 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Display html tags on a webpage
Ad:
0

Display html tags on a webpage

by on Mar 6th, 2009
Displays the html tags without rendering on a webpage.
JavaScript / DHTML / AJAX Code Snippet (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>Untitled Page</title>
  5.     <script type="text/javascript">
  6.     function firstMethod()
  7.     {
  8.         var str = document.getElementById("tbl").innerHTML.replace(/[<]/g,'&lt;');
  9.         str = str.replace(/[>]/g,'&gt;');
  10.         document.getElementById("displayHTML").innerHTML = str;
  11.     }
  12.     function secondMethod()
  13.     {
  14.         document.getElementById("displayHTML").innerText = document.getElementById("tbl").innerHTML;
  15.     }
  16.     </script>
  17. </head>
  18. <body>
  19.     <div id="displayHTML"></div>
  20.     <table border="1" id="tbl">
  21.         <tr>
  22.             <td style="width: 100px">
  23.                 1</td>
  24.             <td style="width: 100px">
  25.                 2</td>
  26.             <td style="width: 100px">
  27.                 3</td>
  28.         </tr>
  29.         <tr>
  30.             <td style="width: 100px">
  31.                 4</td>
  32.             <td style="width: 100px">
  33.                 5</td>
  34.             <td style="width: 100px">
  35.                 6</td>
  36.         </tr>
  37.         <tr>
  38.             <td style="width: 100px">
  39.                 7</td>
  40.             <td style="width: 100px">
  41.                 8</td>
  42.             <td style="width: 100px">
  43.                 9</td>
  44.         </tr>
  45.     </table>
  46.     <input type="button" value="use conventional method" onclick="firstMethod()" />
  47.     <input type="button" value="use serkan's method" onclick="secondMethod()" />
  48. </body>
  49. </html>
  50.  
  51. This is a good example of using javascript innerText property which is not 
  52. as popular as innerHTML property.
Comments on this Code Snippet
Permalink
Sep 19th, 2009
0

Re: Display html tags on a webpage

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. #
  2. This is a good example of using javascript innerText property which is not
  3. #
  4. as popular as innerHTML property

Yeah, good old sanity method, -not supported by crippled "modern" browsers until yesterday!

In fact, firefox still dosn't - currently tested in fx 3.5.3 no error but no go either...
Last edited by Troy III; Sep 19th, 2009 at 10:45 pm.
Posting Pro
Troy III is offline Offline
511 posts
since Jun 2008
Permalink
Sep 19th, 2009
0

Re: Display html tags on a webpage

So what?
Banned
serkan sendur is offline Offline
2,057 posts
since Jan 2008
Permalink
Sep 20th, 2009
0

Re: Display html tags on a webpage

How "what?"!!!

Your precious:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.   <input type="button" value="use serkan's method" onclick="secondMethod()" />
"SERKAN's METHOD" type of think - will NOT work in Fire-Fox and other Netscape lurking children of the internet.
- What "what" ?
Last edited by Troy III; Sep 20th, 2009 at 3:43 am.
Posting Pro
Troy III is offline Offline
511 posts
since Jun 2008
Permalink
Sep 20th, 2009
0

Re: Display html tags on a webpage

if it does not work in those browsers, just find the substitute and post it to here instead of useless commenting.
Banned
serkan sendur is offline Offline
2,057 posts
since Jan 2008
Permalink
Sep 21st, 2009
1

Re: Display html tags on a webpage

Something like this should work:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. /**
  2.  * Return html numeric entities encoded string
  3.  */
  4. String.prototype.toHtmlEntities = function() {
  5. 	return this.replace(/[^a-z0-9\.\-\_\s\t]/ig, function(c) {
  6. 		return '&#'+c.charCodeAt(0)+';';
  7. 	});
  8. };

Example:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. '<div>This & that</div>'.toHtmlEntities();

It replaces every non-alphabetic and numeric character (excluding a few defined in the regex pattern) with their character codes.
Nearly a Posting Virtuoso
digital-ether is offline Offline
1,250 posts
since Sep 2005
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript debugger does not work
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: AJAX vs Flash





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC