Posted in jQuery

[jQuery] JavaScriptで全角英数を半角英数に変換する方法

   Published Date: 2015年8月1日

入力フォームで全角英数字が入力された時に、自動で半角英数字に変換する方法です。

PHPの場合は mb_convert_kana()という関数があり、オプションを指定すればあらゆる変換が可能なのでJavaScriptやjQueryにも同様の関数があると思いっていましたが、見当たりませんでした。
（もしかしたら見当たらないだけで、関数が存在しているのかもしれません・・・）

文字コード表を使って判断するような感じの方法で変換を行ってみました。

半角を全角に変換するプログラム

全角英数・半角英数の文字コードの区切りの場所から-65248の間が半角英数の文字コードになります。

10進数、16進数での表記があります。

JavaScriptで半角に変換する方法

// 半角に変換（１０進数）
str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
});
// 半角に変換（１６進数）
str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
});

これを使えば全角英数を半角英数に変換できます。

jQueryでフォームの入力値を半角に変換

<script type="text/javascript">
$(function(){
    $(".keyword").blur(function(){
        charChange($(this));
    });


    charChange = function(e){
        var val = e.val();
        var str = val.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});

        if(val.match(/[Ａ-Ｚａ-ｚ０-９]/g)){
            $(e).val(str);
        }
    }
});
</script>

3行目：blur はフォーカスが離れた時の処理を行います。

４行目：全角→半角変換処理はcharChangeという関数を作り、それを読み込みます。

８行目：charChange関数を作成します。

９行目：テキストボックスの値をvalという変数に入れます。

10行目〜12行目：全角英数を半角英数に変換しています。

XHTML
<p><input type="text" class="keyword"></p>

フォームのテキストボックスにクラス名を指定します。

半角を全角に変換（参考）

全角英数・半角英数の文字コードの区切りの場所から+65248の間が半角英数の文字コードになります。

// 全角に変換（１０進数）
str.replace(/[A-Za-z0-9]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) + 65248);
});
// 全角に変換（１６進数）
str.replace(/[A-Za-z0-9]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
});



Author: webmaster