JavaScript ›

入力フィールドとかの全角を半角にする

全角の数字やアルファベット、一部の記号を半角に変換する方法です。ネタはどこにでも転がっていて、自分でもどなたのソースが元ネタかわかりませんが、忘れた時のために覚え書きします。

UTF16の文字コードでいうところ、全角の数字やアルファベットは半角の65248個分後ろにあるということが分かっているので、65248引いたコード値を受け取って文字に変換する、という理屈だそうです。便利。

String.prototype.charCodeAt() - JavaScript | MDN 

var hankaku_eisu = function(str) {
  if (!str) return '';
  return String.fromCharCode(str.charCodeAt(0) - 0xFEE0);
};
var result = 'ＡＢＣＤＥＦＧ'.replace(/[Ａ-Ｚａ-ｚ０-９]/g, hankaku_eisu);
結果
> ABCDEFG

こんな感じで、charCodeAt()でUnicode値を得て、0xFEE0引いた値をfromCharCode()で文字に復元します。マッチングさせているトコは、全角ではありますが大文字小文字区別なしのiオプションを付けて/[a-z０-９]/giでもうまく行くと思います。

ちなみに、キーボードで英数キーに割り当てられている!#$%&()=+のような記号も大半がイケるのですが一部例外があるので端折ってます。charCodeAt()についての詳細はMDNがいいですが、記号についてはどっかでUnicode表を探してみると良いと思います。

自分のメインの使いどころは、メールアドレスや電話番号などを求める入力フィールドです。入力に慣れていないユーザーに配慮すると「半角で入力しなさい!!」の一点張りだと嫌われてしまうので、こっそり変換しといてあげるようにします。

英数以外の記号は、入力が予想されるスペースとか＠、ハイフン、ハイフンマイナスに限定して変換するようにしてます。どうせその後バリデーションにかけるので他の記号はほっときます。そうやって「とりあえず想定できる文字は半角にしとくが得体の知れない文字は突っ返す」って方法を取るようにしています。 

function zen2han (str) {
  if (!str) return ''; // 偽であれば空文字を返す

  var hankaku_eisu = function(str) {
    if (!str) return '';
    return String.fromCharCode(str.charCodeAt(0) - 0xFEE0);
  };

  str = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, hankaku_eisu); // 英数
  str = str.replace(/[−―‐ー]/g, '-'); // 色々なハイフンも統一
  str = str.replace(/＠/g, '@'); // @マークも親切に統一
  str = str.replace(/[ts　]/g, ''); // ついでにタブやスペースを消す
  return str;
}

// 入力値の全角を半角に変換（この後バリデーションにかける）
var email = zen2han( document.getElementById('email').value );
関連する記事