zenToHan

One of the problems I occasionally come across in web apps is sanitizing user input. Japanese has two versions of each alphanumeric character, known as 全角 (full-width) and 半角 (half-width). Many users don't know how to differentiate between the two, and it can cause problems when inserting values into the database.

Of course, we could detect the presence of full-width characters and warn the user, prompting them for new input. This, however, requires one extra step on the part of the user. For usability and accessibility we want to avoid this.

This is a simple jQuery plugin based on a script written by a Japanese developer. The original was just a function that took a DOM element. I essentially just jQuerified it, adding a couple of extra characters to the checkstring.

The original is here:

http://d.hatena.ne.jp/kokoromo/20090113/1231828845


And here is my version:

/*!
* jQuery zenToHan plugin
* 
* Original author: David John Welsh
* 
* This was inspired by a function written by a Japanese developer 
* here: [ http://d.hatena.ne.jp/kokoromo/20090113/1231828845 ]
* 
*  All I did was add a few extra characters and jQuerify it.
* 
* When called on a text input element, it converts any full-width 
* characters to half-width ones. This is useful if you require
* alphanumeric values that are to be entered into a database. Only 
* works on A-Z, numbers and a couple of special characters.
*/

;(function ($, window, document, undefined) {
    
  jQuery.fn.zenToHan = function () {
      
    return this.each(function () {
      
      var thisval = $(this).val();
      
      if (typeof(thisval) != "string") return true;
      
      var han = '*1234567890abcdefghijklmnopqrstuvwxyz
             ABCDEFGHIJKLMNOPQRSTUVWXYZ@-----.,:';
      var zen = '＊１２３４５６７８９０ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑ
             ｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱ
             ＲＳＴＵＶＷＸＹＺ＠−ーー−—．，：';
      
      var word = thisval;
      
      for(i = 0; i < zen.length; i++) {
          var regex = new RegExp(zen[i],"gm");
          word = word.replace(regex, han[i]);
      }
      $(this).val(word);
    
    });
    
  };
})(jQuery);