2013年2月16日(土) 23時51分53秒 [Web関連]

入力された全角文字をJavaScriptで半角に変換する方法

日本語環境下では、英字や数字は全角でも半角でも入力が可能です。
メールアドレスやURLなど、たいてい半角で入れそうな文字列でも、全角で入力してしまう方々も居ます。
ウェブ上でそれらの入力を求めるとき、「半角で入力してください」などとユーザに要求するのではなく、ユーザが全角・半角のどちらで入力しても、ウェブサイト側で望みの形式に変換するのが望ましいでしょう。

というわけで、ウェブ上のフォームに入力された全角英数字を、JavaScriptで半角英数字に変換させよう……と思ったんですが、そこそこ面倒ですね。(^_^;)
replaceメソッドを使って、正規表現で一括変換すれば良いと思ったんですが、検索する側の指定はともかく、変換後の文字列をどう指定するか悩みました。^^;

というわけで、ググってみましたところ、とてもスマートな変換方法がありました。
『全角英数記号の文字コードから「0xFEE0」（＝65248）を引くと半角英数記号の文字コードになる』というUnicodeの仕様を利用して、

のように記述する方法です。
なるほど、これは楽ですね！

例えば、全角の「Ａ」はUnicodeでは「0xFF21」です。
半角の「A」はUnicodeでは「0x41」です。
これらを引き算すると、0xFEE0 になります。
この差（0xFEE0）は、英字だけでなく、数字・記号（※キーボードから直接打てるようなASCII文字にある記号）でも同じです。

charCodeAtメソッドは、Unicodeでの文字コードを返すメソッドです。
なので、実際のウェブページで使われている文字コードがSHIFT-JISやEUC-JPであっても、Unicodeの文字コードの値が返ります。なので、実際に入力される文字の文字コードを気にせず、単純に「0xFEE0」を引き算するだけで変換できます。

引き算で「半角文字の文字コード」を得たら、以下のようにfromCharCodeメソッドで文字に変換すれば完了です。

fromCharCodeメソッドは、引数に指定した数値をUnicodeの文字コードだと解釈して、対応する文字を返すメソッドです。
いやあ、便利ですね。^^;
このcharCodeAt、fromCharCodeメソッドを利用する方法で、英字・数字・記号に関しては全角・半角の相互変換が簡単にできます。

全角・半角変換のJavaScriptソース全体は、以下のページを参照してください。

■JavaScript による半角と全角の相互変換(カタカナを除く)完成版（＠logical error）
■JavaScriptで全角英数と半角英数の相互変換（＠Rewish@hatena）

ただ、残念ながら、カタカナはこの方法では対処できないのですよね……。
この「0xFEE0を引く」という簡単な引き算で全角・半角の相互変換が可能なのは、半角文字でも全角文字でも、『文字の並び順は同じ』という仕様があるからこそなんですが、カタカナの場合は、なぜか全角と半角では並び順が異なります。

半角カタカナは、
ｧ（0xff67） ｨ（0xff68） ｩ（0xff69）…… ｱ（0xff71） ｲ（0xff72） ｳ（0xff73）……
のような順序で並んでいるんですが、
全角カタカナは、なぜか、
ァ（0x30a1） ア（0x30a2） ィ（0x30a3） イ（0x30a4） ゥ（0x30a5） ウ（0x30a6）……
のような順序で並んでいるんですよね。

なので、単純な引き算では変換できないという……。(^_^;;;
どうしてこんな仕様になったんでしょうか。(^_^;;;

まあ、仮に並び順が同じだったとしても、濁点・半濁点の問題があるので、結局は単純に引き算では変換できないんですけども。
全角文字では「ガギグゲゴ」のような濁点付きの文字もそれぞれ1文字で表現できますが、半角文字では「ｶﾞｷﾞｸﾞｹﾞｺﾞ」のように濁点は独立した1バイトの文字（0xff9e）ですから。

カタカナを半角・全角で変換するには、それぞれの配列を作って比較していくしかないみたいですね。(^_^;;;
ググってみると、例えば、以下のようなJavaScriptソースがありました。

■半角カナを全角カナに変換する

あと、以下のページもとても参考になりました。

■JavaScriptによる英数字/記号/カタカナの全角半角変換（＠ディストレイド）