JavaScript で英数字や記号を全角から半角へ変換する方法

2017/02/15 , ,

Web システムにおいて、全角に入力した文字を半角に変換したい需要は多々存在します。Chrome ブラウザ等は CSS の ime-mode プロパティが利用できないため、全角入力されてもクライアント側で半角へ変換する処理が入っていると非常に親切ですね。

このような細かいユーザビリティーは、設計段階までに要件として吸い上げていないケースが多く、最終段階で利便性の向上を求められることがあります。今回は英数字や記号を全角から半角へ変換する方法を紹介します。

全角から半角へ変換するメリット

特定項目のデータを半角で統一することで生まれてくるメリットもあります。例えば、検索対象となる項目の入力データに全角と半角が混在していると、抽出するのが結構大変です。Oracle の TO_SINGLE_BYTE 関数のように変換処理を行えるものもありますが、検索対象のデータ母数が大きいと検索パフォーマンスへも影響するため、予め変換した状態で登録しておいた方が効率良く検索することも出来るようになります。

特に textarea に対して長文を入力できる項目の場合、別のデータからコピー&ペーストして入力することもあり、そのコピー元が必ずしも半角とは限らず、ユーザーとしても敢えて半角に入力し直すこともしません。しかし、自動的に半角変換されることがユーザーも分かっていると、安心して全角と半角が混在したデータを入力できるので、システム利用者の効率の向上を見込むこともできます。

全角から半角に変換する – 英数/記号

JavaScript の変換処理と言えば replace 関数です。イメージとしては一文字ずつ判断して変換処理を掛ければ半角化することができます。しかしそんなループ処理のコードを書くのは面倒なので、ここは replace 関数と正規表現を上手く組み合わせて変換を行えるようにしましょう。

文字コードをシフトさせて変換する

英数記号の文字コードは半角と全角で同じ並びをしています。それぞれの文字コードをご覧ください。

半角英数記号 – Unicode
change-double-byte-to-half-width01

全角英数記号 – Unicode
change-double-byte-to-half-width02

例えばエクスクラメーションの場合、半角の U+0021 と全角の U+FF01 が丁度 0xFEE0 ずれています。この文字コードのずれている分をシフトしてあげることで、「!」から「~」の範囲で全角から半角の変換を実現させることができます。

それでは実際にプログラムを見てみましょう。

ちょっと待ったー!!!

実はこれでは不完全です。全角のダブルクォート、シングルクォート、バッククォートが、実際に日本仕様のキーボードから入力できる記号と異なります。そして全角の円マーク「¥」も「\」とは異なるため、変換処理を別途加えなくてはいけません。また、こちらには全角スペースの変換が含まれていません。スペース変換も対象に含めるのであれば、実装を要します。

更に全角「・」を半角「・」に変換する処理も含まれていませんが、半角「・」は半角カナに属するので今回は変換処理の対象としません。

そして最後に、この処理で変換されるのは「~」であり「〜」ではありません。まれに「〜」が入力される場合があるため、こちらも別途変換を実施します。

上記に示した各種文字の変換処理を含めて完成形となります。

それでは実際に完成形のプログラム動作を確認してみましょう。

全角英数記号を半角変換処理サンプル

次のテキストエリアに入力し、フォーカスが外れると半角変換を行いテキストエリアの値が変更されます。

いかがでしょうか。もし一部の記号等、全角に統一する必要があるのであれば、正規表現部分から該当の記号を除いて、全角変換する replace 処理を加えれば良いので、こちらのコードをベースに改修できると思います。カナ文字の場合は逆に半角から全角へ統一したい需要があるかと思いますので、そちらは改めて紹介しようと思います。

以上、JavaScript で英数字や記号を全角から半角へ変換する方法でした。

PAGE TOP ↑