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

2015/10/07

ブラウザ上で半角入力の制御は CSS の ime-mode プロパティが存在します。しかしこれは Internet Exporer 独自のものなので、Chrome ブラウザなど対応していないブラウザも存在します。

全角入力を拒否するような制御を JavaScript に組み込むことも可能ですが、半角に直してもう一度同じ内容を入力させる仕様は最適な対応方法ではないと考えています。

そこでユーザビリティを損なわず、故意ではない全角入力を許容するために、英数字や記号を全角から半角に変換する処理を提案させていただきます。

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

ある特定項目のデータを半角で統一することで、生まれるメリットもたくさんあります。例えば、検索画面で対象となるデータは、全角と半角が混在していると部分一致の条件を拡張しなくてはいけないので抽出するのが大変です。

Oracle であれば TO_SINGLE_BYTE 関数を使って変換処理することも可能ですが、検索対象の母数が大きいとパフォーマンスにも影響します。予め統一した状態で登録しておけば、効率よく検索できるようになるでしょう。

特に textarea のような長文入力できる項目の場合、別のデータからコピー&ペーストして入力されることもあるため、ユーザー側で意識的に半角に書き換えることもしないでしょう。もし自動的に半角変換されることが利用者に伝わっていれば、安心して全角と半角が混在したデータを入力できるので、システム全体の利便性の向上を見込むこともできます。

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

JavaScript の変換処理と言えば replace 関数です。一文字ずつ判断して変換処理を掛ければ、半角化することができます。しかし、そんな冗長なループ処理のプログラムはセンスがありません。ここは replace 関数正規表現 を組み合わせて変換を行うとスマートな処理になります。

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

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

半角英数記号 – Unicode

0123456789ABCDEF
U+0020 !"#$%&'()*+,-./
U+00300123456789:;<=>?
U+0040@ABCDEFGHIJKLMNO
U+0050PQRSTUVWXYZ[\]^_
U+0060`abcdefghijklmno
U+0070pqrstuvwxyz{|}~

全角英数記号 – Unicode

0123456789ABCDEF
U+FF00
U+FF10
U+FF20
U+FF30_
U+FF40
U+FF50

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

ではプログラムで実装してみましょう。

全角英数記号を半角化する処理【JavaScript】
/**
 * 全角から半角への変革関数
 * 入力値の英数記号を半角変換して返却
 * [引数]   strVal: 入力値
 * [返却値] String(): 半角変換された文字列
 */
function toHalfWidth(strVal){
  // 半角変換
  var halfVal = strVal.replace(/[!-~]/g,
    function( tmpStr ) {
      // 文字コードをシフト
      return String.fromCharCode( tmpStr.charCodeAt(0) - 0xFEE0 );
    }
  );

  return halfVal;
}

とてもシンプルな処理ができあがりました。

しかしこれでは不完全です。どこに問題があるのか箇条書きでまとめておきましょう。

  • 全角のダブルクォート・シングルクォート・バッククォートの文字が異なっている
  • 全角の「¥」が上記のコード内に存在しない
  • 全角スペースが対象外になっている
  • この処理で変換されるのは「~」であり「〜」ではない。(ブラウザ上では判別しづらいが文字コードが違う)まれに「〜」が入力される場合があるため、別途変換が必要。

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

つまり、これらの文字コードシフトで対応できない文字の処理を加えれば完成です。

全角英数記号を半角化する処理 完成版【JavaScript】
/**
 * 全角から半角への変革関数
 * 入力値の英数記号を半角変換して返却
 * [引数]   strVal: 入力値
 * [返却値] String(): 半角変換された文字列
 */
function toHalfWidth(strVal){
  // 半角変換
  var halfVal = strVal.replace(/[!-~]/g,
    function( tmpStr ) {
      // 文字コードをシフト
      return String.fromCharCode( tmpStr.charCodeAt(0) - 0xFEE0 );
    }
  );

  // 文字コードシフトで対応できない文字の変換
  return halfVal.replace(/”/g, "\"")
    .replace(/’/g, "'")
    .replace(/‘/g, "`")
    .replace(/¥/g, "\\")
    .replace(/ /g, " ")
    .replace(/〜/g, "~");
}

それではプログラムの動作を確認してみましょう。

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

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

もし一部の半角ではなく全角に統一したい記号があれば、正規表現から該当部分を除いて、全角変換する replace 処理を加えれば大丈夫です。基本的にはこのコードをベースに改修できると思います。

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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!