g3utils

by cent cent

HTML

<FORM id="htmlentities" name="htmlentities">
      <FIELDSET>
         <LEGEND>Enter text:</LEGEND>
         <INPUT type="button" value="Clear All" /><br />
         <TEXTAREA name="input" cols="80" rows="3" wrap="virtual"></TEXTAREA><br />
      </FIELDSET>
      <FIELDSET>
         <LEGEND>Character encoder based on page's encoding scheme: <i>g3.utils.htmlEntities()</i></LEGEND>
         <INPUT type="button" value="Encode" /><br />
         <TEXTAREA name="encode" cols="80" rows="3" wrap="virtual"></TEXTAREA><br />
      </FIELDSET>
      <FIELDSET>
         <LEGEND>Character decoder based on page's encoding scheme: <i>g3.utils.decodeHtmlEntities</i></LEGEND>
         <INPUT type="button" value="Decode" /><br />
         <TEXTAREA name="decode" cols="80" rows="3" wrap="virtual"></TEXTAREA><br />
      </FIELDSET>
   </FORM>
   <TABLE id="entities">
   <THEAD class="thead">
      <TR><TH colspan="10">Entity table stored in <i>g3.utils.entityTable</i></TH></TR>
   </THEAD>
   <TBODY class="tbody">
   </TBODY>
   </TABLE>

CSS

table {
      border-collapse: collapse;
   }
   thead.thead {
      background-color: #b2b2b2;
      border-bottom: 2px solid #ffffff;
   }
   tr.tr0 {
      background-color: #cccccc;
      border-bottom: 1px solid #b2b2b2;
   }
   tr.tr1 {
      background-color: #e6e6e6;
      border-bottom: 2px solid #ffffff;
   }
   th, td {
      padding: 0.2em 1em;
   }

JavaScript

/**
 * Root namespace.
 * @namespace {g3}
 */
(function(g3, $, window, document, undefined){
   g3.utils = g3.utils || {};
/*****************************Function htmlEntities()***************************
* Converts strings to their HTML character entity equivalents or their character
* encoding values based on the encoding scheme defined by the page.
* It mofifies 'g3.utils.escapeUtf8()' by replacing encoding values with their
* HTML equivalent entities.
* @module {g3.utils}
* @function {g3.utils.htmlEntities}
* @public
* @param {String} 'str' the string to search for and convert.
* @return {String} Returns the encoding equivalent of the passed string with 
* HTML character entities whenever possible.
* Attention: do NOT double encode as you cannot decode!
* @reference http://stackoverflow.com/questions/1354064/how-to-convert-characters-to-html-entities-using-plain-javascript
* http://en.wikipedia.org/wiki/Unicode
* http://www.sitepoint.com/do-you-know-your-character-encodings/
* http://people.w3.org/rishida/tools/conversion/
*******************************************************************************/
   g3.utils.htmlEntities = function(str){
      var entityTable = g3.utils.entityTable.getInstance();
      return str.replace(/[\u00A0-\u2666<>\&'"]/g, function(c){
         return '&' + (entityTable[c.charCodeAt(0)] || '#'+c.charCodeAt(0)) + ';';
      });
   };
   
/**************************Function decodeHtmlEntities()************************
* Converted strings from 'g3.utils.htmlEntities()' are reverted back to their 
* original form based on the encoding scheme defined by the page.
* @module {g3.utils}
* @function {g3.utils.decodeHtmlEntities}
* @public
* @param {String} 'str' the string to search for and revert.
* @return {String} Returns the initial string as it is displayed by the current
* browser.
* @reference http://stackoverflow.com/questions/1354064/how-to-convert-characters-to-html-entities-using-plain-javascript
*...