Kana Character Conversion in Javascript (Part 1)

When dealing with enterprise customers in Japan building web applications, a lot of the times we deal with legacy systems that have specific character requirements

  1. Legacy systems that require half-width kana, but most browsers by default enter full-width kana. 
  2. Legacy systems that do not support 第二水準 SJIS characters, however most browsers support these kanji characters. 
The best way to address these character issues is typically upon first entry into the browser. Restricting and converting characters in the browser typically results in less work for integration systems downstream.

Part 1 of this article is going to focus on the first issue of half-width kana characters.

Half-width Kana Character Conversion Code Sample:
In order to setup our example we will first need to add the requisite libraries. To keep things simple we will only use JQuery.
Next we will need to create the html for kana entry:
The following code will be used for replacement of full-width kana characters with half-width kana characters:
Finally, we will add the conversion characters. Note that any replacement characters can be added or removed from this list.
Clicking on the "convert Full to Half" button, all characters which were entered full-width kana are converted to half-width kana.

The following code can also be added into KnockoutJS or into AngularJS so that the character conversion happens without having to click a button.  However, that will be the topic of the next blog post.

A working example can be seen on jsFiddle.

About the Author
Kent Horng worked in the Silicon Valley for 6 years at various startup companies, prior to moving to Japan and later joining Enrapt.  He has spent the last 8 years working on various web/cloud/tablet applications and is currently obsessed with iOS, AngularJS, and HTML5.

Popular Posts