JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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



ajax ajaxcode ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onerror onmouseoutdivproblem onreadystatechange parent pdf php player post problem progressbar rated rating regex runtime scroll search security select session shopping size software sql star stars synchronous text textarea unicode validation w3c web website window windowofwords windowsxp wysiwyg xml \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC