<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Javascript Encode HtmlSpecialChars ⁄ >




clicks: 16008 16008 2009-08-27 2009-08-27 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This



If you're a PHP web-developer, you're certanily familiar with htmlspecialchars. This is a function that "... convert special characters to HTML entities..."

JavaScript doesn't have such functionality in its core, however building one covering the basic needs isn't that hard, this will be the purpose of this snippet.

For example let's suppose that you're using innerHTML and you want to write some just as: <strong>Text in Bold</strong>, if you do this the content will be Text in Bold, this is, it'll treat <strong> as a normal html tag text, but you may want to write <strong> as it.

You could manually write it by just using the respective entities, however in a large string with, for example, quotes and/ or ampersands if you can automatically do this task, better.


This snippet won't fully support htmlspecialchars as in PHP, it will only take care of: ", &, <, > but converting to their correspondent entities chars.


Html File

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Encode Html Special Chars</title>
  6. <script type="text/javascript" src="EncodeHtmlSpecialChars.js"></script>
  7. <script type="text/javascript" src="EncodeHtmlSpecialCharsInit.js"></script>
  8. </head>
  9. <body>
  10. <div id="txt"></div>
  11. <div id="txt_verbose"></div>
  12. <textarea id="txtarea" cols="40" rows="5"></textarea>
  13. </body>
  14. </html>



EncodeHtmlSpecialChars.js, our main class

  1. /**
  2. * Encode html special chars
  3. *
  4. * @author pedrocorreia.net
  5. *
  6. * @return Function Encode
  7. * @return Function Html
  8. */
  9. var HtmlSpecialChars = function() {
  10. //cache document
  11. var _d = document;
  12.  
  13. /**
  14. * Get Html Object reference, by its ID
  15. *
  16. * @param String Id Object
  17. * @return Object
  18. */
  19. var $ = function(o) { return _d.getElementById(o) || null; };
  20.  
  21. /**
  22. * Create Dom Element
  23. *
  24. * @param String Element to create
  25. * @return Object
  26. */
  27. $.createElement = function(o) { return _d.createElement(o) || null; };
  28.  
  29. /**
  30. * Create Element TextNode and add content to it
  31. *
  32. * @param String Content
  33. * @return Object
  34. */
  35. $.createTextNode = function(txt) { return _d.createTextNode(txt) || null; };
  36.  
  37. /**
  38. * Add Html Text
  39. *
  40. * @param String Field
  41. * @param String Content to add
  42. */
  43. var _AddHtmlText = function(f, str) { $(f).innerHTML += str; };
  44.  
  45. /**
  46. * Encode String
  47. *
  48. * @param String Verbose output
  49. */
  50. var _Encode = function(target, str, _verbose_output) {
  51. var elem = $.createElement("div");
  52. elem.innerText = elem.textContent = str;
  53. $(target).innerHTML = elem.innerHTML;
  54.  
  55. if (_verbose_output) {
  56. //output the html special chars, this will
  57. //print "=>&quot; &=>&amp; etc, etc
  58. $(_verbose_output).appendChild($.createTextNode(elem.innerHTML));
  59. }
  60. elem = null;
  61. };
  62.  
  63. return { Encode: _Encode, Html: _AddHtmlText };
  64. };








EncodeHtmlSpecialCharsInit.js, add some examples to test our script

  1. window.onload = function() {
  2. //our example string
  3. var str = "& Simple text with html tags <> <img src=\"\" /><br />";
  4. str += "<span>testing ....</span>";
  5.  
  6. //create HtmlSpecialChars Object
  7. var enc = new HtmlSpecialChars();
  8.  
  9. //insert text by converting a string to its correspondent HtmlSpecialChars and
  10. //output the encoded text to a div called "txt_verbose"
  11. enc.Encode("txt", str, "txt_verbose");
  12.  
  13. //insert the same text but to a textarea
  14. enc.Encode("txtarea", str);
  15.  
  16. //clear resources
  17. enc = null;
  18.  
  19. //add normal html statement, in this case innerHTML
  20. //will treat this as a "normal" <strong> tag
  21. HtmlSpecialChars().Html("txt", " ... <strong>This text's in bold</strong>");
  22. };





The code above will generate the following:



As you can see:

  • in the first line we have html tags written as it, and a text in bold;

  • in the second line it will print the htmlspecialchars entities, i.e., " = &quot; & = &amp; and so on...

  • we can also use it form elements, such as textarea



If you have any doubt or found any error, please drop me an email.









clicks: 16008 16008 2009-08-27 2009-08-27 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This