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

2018年5月24日2022年8月21日

URLをコピーしました！

今回は、ユーザーがフォームに入力した際に、JavaScriptで動的に全角・半角を変換するスクリプト作成したので、忘れないようにメモっておきます。

日本語特有の問題とも言えなくもないが、入力フォームを構築する上でよくある全角・半角の問題。
前回、正規表現の記事の時にも書きましたが、ユーザーは基本的に自由に入力できるので、それをJavaScriptで自動的に変換します。

英字・数字・記号を変換

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

全角英数字を半角英数字に変換

function toHalfWidth(elm) {

return elm.value.replace(/[Ａ-Ｚａ-ｚ０-９！-～]/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);

});

}

Qiita

【jQuery】inputの全角数字・全角アルファベットを半角に変換 - Qiita 便利なのでメモ。 DEMO index.html <!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs...

カタカナを変換

カタカナもPHPの[mb_convert_kana()]のように一発で変更できれば良いのですが、JavaScriptの場合はどうやら1つずつ全角・半角を変換するしか無いようです。

半角カタカナを全角カタカナに変換

function toFullZenkana(elm) {

var beforeStr = new Array('ｧ','ｨ','ｩ','ｪ','ｫ','ｬ','ｭ','ｮ','ｯ','ｰ','ｳﾞ','ｶﾞ','ｷﾞ','ｸﾞ','ｹﾞ','ｺﾞ','ｻﾞ','ｼﾞ','ｽﾞ','ｾﾞ','ｿﾞ','ﾀﾞ','ﾁﾞ','ﾂﾞ','ﾃﾞ','ﾄﾞ','ﾊﾞ','ﾋﾞ','ﾌﾞ','ﾍﾞ','ﾎﾞ','ﾊﾟ','ﾋﾟ','ﾌﾟ','ﾍﾟ','ﾎﾟ','ｱ','ｲ','ｳ','ｴ','ｵ','ｶ','ｷ','ｸ','ｹ','ｺ','ｻ','ｼ','ｽ','ｾ','ｿ','ﾀ','ﾁ','ﾂ','ﾃ','ﾄ','ﾅ','ﾆ','ﾇ','ﾈ','ﾉ','ﾊ','ﾋ','ﾌ','ﾍ','ﾎ','ﾏ','ﾐ','ﾑ','ﾒ','ﾓ','ﾔ','ﾕ','ﾖ','ﾗ','ﾘ','ﾙ','ﾚ','ﾛ','ﾜ','ｦ','ﾝ');

var afterStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン');

var fullStr = elm.value;