JavaScriptでよく使う全角・半角を変換するスクリプト(メモ)

js-full-half-width
LINEで送る
Pocket

日本語特有の問題とも言えなくもないが、入力フォームを構築する上でよくある全角半角の問題。
前回、正規表現の記事の時にも書きましたが、ユーザーは基本的に自由に入力できるので、それを制御する側は大変です。
今回も忘れないように、全角半角変換スクリプトをメモっておきます。

アプリを開発する上で、文字や数字の妥当性をチェックする際に欠かせないのが正規表現。いくら説明されても何かの暗号のようでなかなか理解できません。こうなったら、よく使う正規表現をコピペですぐ利用できるようにまとめておきましょう。フォームでよく使う正規表現正規表現はいつも悩みの種です。それは、作りて側の要望によってそれぞれ違うからです。例えば、あるサイトは全角OKなのに別のサイトはダメとか、電話番号のハイフンの有無とか、郵便番号の入力欄が上3桁と下4桁で分かれてたりくっついたりなど。全世界とは言わない...

英字・数字・記号を変換

PHPではmb_convert_kana()関数が用意されていますが、JavaScriptでは正規表現を利用して変換します。
少々面倒ですが、後に記述するカタカナ全角半角変換よりは比較的簡単です。

全角英数字を半角英数字にする場合

function toHalfWidth(elm) {
    return elm.value.replace(/[A-Za-z0-9!-~]/g, function(s){
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
    });
}

半角数字を全角数字にする場合

function toFullWidth(elm) {
    return elm.value.replace(/[A-Za-z0-9!-~]/g, function(s){
        return String.fromCharCode(s.charCodeAt(0)+0xFEE0);
    });
}

参考:【jQuery】inputの全角数字・全角アルファベットを半角に変換 – Qiita


カタカナを変換

カタカナPHPmb_convert_kana()のように一発で変更できれば良いのですが、どうやら1つずつ置換するしか無いようです。

半角カタカナを全角カタカナにする場合

function toFullZenkana(elm) {
    var beforeStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン');
    var afterStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン');
    var fullStr = elm.value;
    for(var i = 0; i < beforeStr.length; i++) {
        fullStr = fullStr.replace(new RegExp(beforeStr[i], 'g'), afterStr[i]);
    }
    return fullStr;
}
フォームなどで入力した文字列を、あらかじめ決められた形に変換してみます。 全角英数を半角英数に変換する HTML Jav...

変換タイミングと使い方

onChangeイベントでも良いかもしれませんが、今回はonBlurイベントが発生した際の書き方を紹介します。

HTMLタグで直接呼び出す
<input type="text" class="form-control" id="name" name="name" value="" placeholder="Name" onblur="toHalfWidth(this)" />
複数の入力項目を一括で処理する
<script src="https://ajax.googleapis.com/ajax/libs//3.3.1/jquery.min.js"></script>
<script>
$(function(){
    $('input').on('blur', function() {
        $('input').each(function() {
            $(this).val(toHalfWidth($(this).val()));
        });
    });
});
</script>

厳密に言うと、type="radio"type="checkbox"を無視したいですが、とりあえずということで。
色々な書き方があったので、不足等あれば教えてください。

LINEで送る
Pocket


コメントを残す

Amazon プライム対象