Display html tags on a webpage

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
serkan sendur serkan sendur is offline Offline Mar 6th, 2009, 5:37 pm |
0
Displays the html tags without rendering on a webpage.
Show Printable Version Show Printable Version
Quick reply to this message  
Code Snippet
•
•
•
•
JavaScript / DHTML / AJAX Syntax
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.
Code Snippet Comments
0
Troy III Troy III is offline Offline | Sep 19th, 2009
•
•
•
•
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.
 
0
serkan sendur serkan sendur is offline Offline | Sep 19th, 2009
•
•
•
•
So what?
 
0
Troy III Troy III is offline Offline | Sep 20th, 2009
•
•
•
•
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.
 
0
serkan sendur serkan sendur is offline Offline | Sep 20th, 2009
•
•
•
•
if it does not work in those browsers, just find the substitute and post it to here instead of useless commenting.
 
1
digital-ether digital-ether is offline Offline | Sep 21st, 2009
•
•
•
•
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.
 
 

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxexample ajaxjspservlets array autoplay blackjack browser captcha captchaformproblem cart child class close codes date debugger dependent developer disablefirebug dom editor element embed engine enter events explorer ext file firefox flash form forms frameworks game gears getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe java javascript javascripthelp2020 jquery jsf jsp jump libcurl maps margin marquee masterpage math media menu object onerror onmouseoutdivproblem onreadystatechange parent passing paypal pdf php player position post programming prototype rated redirect safari scale scriptlets scroll search security size software solutions sources star stars stretch synchronous toggle tweet unicode variables web webkit webservice window \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC