<Javascript Encode HtmlSpecialChars ⁄ >

10914

2009-08-27

mySnippets javascript

Download

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

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

EncodeHtmlSpecialChars.js, our main class

/**
* Encode html special chars
*
* @author pedrocorreia.net
*
* @return Function Encode
* @return Function Html
*/
var HtmlSpecialChars = function() {
  //cache document
  var _d = document;
 
  /**
  * Get Html Object reference, by its ID
  *
  * @param String Id Object
  * @return Object
  */
  var $ = function(o) { return _d.getElementById(o) || null; };
 
  /**
  * Create Dom Element
  *
  * @param String Element to create
  * @return Object
  */
  $.createElement = function(o) { return _d.createElement(o) || null; };
 
  /**
  * Create Element TextNode and add content to it
  *
  * @param String Content
  * @return Object
  */
  $.createTextNode = function(txt) { return _d.createTextNode(txt) || null; };
 
  /**
  * Add Html Text
  *
  * @param String Field
  * @param String Content to add
  */
  var _AddHtmlText = function(f, str) { $(f).innerHTML += str; };
 
  /**
  * Encode String
  *
  * @param String Verbose output
  */
  var _Encode = function(target, str, _verbose_output) {
    var elem = $.createElement("div");
    elem.innerText = elem.textContent = str;
    $(target).innerHTML = elem.innerHTML;
 
    if (_verbose_output) {
      //output the html special chars, this will 
      //print "=>&quot; &=>&amp; etc, etc
      $(_verbose_output).appendChild($.createTextNode(elem.innerHTML));
    }
    elem = null;
  };
 
  return { Encode: _Encode, Html: _AddHtmlText };
};

EncodeHtmlSpecialCharsInit.js, add some examples to test our script

window.onload = function() {
  //our example string
  var str = "& Simple text with html tags <> <img src=\"\" /><br />";
  str += "<span>testing ....</span>";
 
  //create HtmlSpecialChars Object
  var enc = new HtmlSpecialChars();
 
  //insert text by converting a string to its correspondent HtmlSpecialChars and
  //output the encoded text to a div called "txt_verbose"
  enc.Encode("txt", str, "txt_verbose");
 
  //insert the same text but to a textarea
  enc.Encode("txtarea", str);
 
  //clear resources
  enc = null;
 
  //add normal html statement, in this case innerHTML 
  //will treat this as a "normal" <strong> tag
  HtmlSpecialChars().Html("txt", " ... <strong>This text's in bold</strong>");
};

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., " = " & = & 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.

10914

2009-08-27

mySnippets javascript

Download

Bookmark This