jQuery Character Table

Posted by Sergio on 2008-12-29

The other day I was looking for the HTML code for the ⌘ (in case you can't see it, that's the command key symbol), found in mac keyboards. It was not the first time I was looking for the HTML code for one of those funky characters. I remember having a hard time trying to represent some Math symbols, like sums and integral equations from my college Calculus days.

I thought this would be a nice opportunity to create a small jQuery sample that renders a range (or ranges) of HTML characters along with their codes.

I started with a simple HTML page, leaving all the JavaScript in an external file.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>HTML Characters</title>
    <meta http-equiv="Content-Type" 
      content="text/html; charset=utf-8">
    <script type="text/javascript" 
      src="jquery-1.2.6.js"></script>
    <script type="text/javascript" 
      src="char-table.js"></script>
  </head>
  <body>
    From (hex): <input id="range_from" type="text"  /> <br/>
    To (hex): <input id="range_to" type="text"  /> <br/>
    <input type="button" value="Load" id="btnLoad" />
    <input type="button" value="Load Example" id="btnLoadEx" />
    <input type="button" value="Load Keyboard Symbols" 
         onclick="CHARTABLE.loadKeyboardSymbols();" />
    <table id="char_table" border="1" />
  </body>
</html>

Here's the JavaScript in the file char-table.js.

$(function(){
  //here we put everything that will run when the page is ready

  $('#btnLoad').click(function(){
    // notice how we get the value of the input fields using val()
    // notice how to parse hex numbers in JS
    var from = parseInt($('#range_from').val(), 16);
    var to = parseInt($('#range_to').val(), 16);
    CHARTABLE.loadRange(from, to);
  });

  $('#btnLoadEx').click(function(){
  //setting the value of each input field
    $('#range_from').val('2190');
    $('#range_to').val('2195');
  //fire the click event of the Load button
    $('#btnLoad').click();
  });

});

// the CHARTABLE object acts as a namespace
var CHARTABLE = {
   loadRanges: function() {
    this.clearTable();
    for(var i=0; i<arguments.length; i++) {
      this.appendRange(
        parseInt(arguments[i][0], 16), 
        parseInt(arguments[i][1], 16)
        );
    }
  },

  loadRange: function(from, to) {
    this.clearTable();
    this.appendRange(from, to);
  },

  clearTable: function(){
    //the html() function is how we replace the innerHTML with jQuery
    $('#char_table').        
      html('<tr><th>Character</th><th>Code</th></tr>');
  },

  appendRange: function(from, to){
    //we can create stand alone DOM elements with $()
    var tbody = $('<tbody/>');
    for(var i=from; i<=to; i++) {
      //notice how we can convert a number to hex
      $('<tr>').
        append('<td>&#x' + i.toString(16) + ';</td>').
        append('<td>&amp;#x' + i.toString(16) + ';</td>').
        appendTo(tbody);
    }
    //adding the tbody to the table at the end
    //  renders faster than adding each row to
    //  the table as we go
    $('#char_table').append(tbody);
  },

  loadKeyboardSymbols: function(){
    this.loadRanges(
      ['21e7', '21e7'],
      ['21a9', '21a9'],
      ['2303', '2305'],
      ['2318', '2318'],
      ['2324', '2327'],
      ['232b', '232b'],
      ['2190', '2198'],
      ['21de', '21df'],
      ['21e4', '21e9']
    );
  }
};

Now enter the range from 2100 to 2400 and stare at a whole bunch of characters that can become useful in some situations.

Note: The characters don't render equally in IE and Firefox, but a large number of them render just fine in both browsers.