inputに入力した文字を決められた形に変換する

2015.12.23

フォームなどで入力した文字列を、あらかじめ決められた形に変換してみます。

全角英数を半角英数に変換する

HTML

1
2
3
4
5
6
<dl>
    <dt>全角英数を半角英数に変換する</dt>
    <dd>
        <input type="text" name="name" class="sample" />
    </dd>
</dl>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
function convertStr(str) {
    return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
    });
}
$(function() {
    $('.sample').on('blur', function() {
        var str = $(this).val();
        $(this).val(convertStr(str));
    });
});

全角英数を半角英数に変換するデモページ
　

半角英数を全角英数に変換する

HTML

1
2
3
4
5
6
<dl>
    <dt>半角英数を全角英数に変換する</dt>
    <dd>
        <input type="text" name="name" class="sample" />
    </dd>
</dl>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
function convertStr(str) {
    return str.replace(/[A-Za-z0-9]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
    });
}
$(function() {
    $('.sample').on('blur', function() {
        var str = $(this).val();
        $(this).val(convertStr(str));
    });
});

半角英数を全角英数に変換するデモページ
　

ひらがなをカタカナに変換する

HTML

1
2
3
4
5
6
<dl>
    <dt>ひらがなをカタカナに変換する</dt>
    <dd>
        <input type="text" name="name" class="sample" />
    </dd>
</dl>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
function convertStr(str) {
    return str.replace(/[ぁ-ん]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) + 0x60);
    });
}
$(function() {
    $('.sample').on('blur', function() {
        var str = $(this).val();
        $(this).val(convertStr(str));
    });
});

ひらがなをカタカナに変換するデモページ
　

カタカナをひらがなに変換する

HTML

1
2
3
4
5
6
<dl>
    <dt>カタカナをひらがなに変換する</dt>
    <dd>
        <input type="text" name="name" class="sample" />
    </dd>
</dl>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
function convertStr(str) {
    return str.replace(/[ァ-ン]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0x60);
    });
}
$(function() {
    $('.sample').on('blur', function() {
        var str = $(this).val();
        $(this).val(convertStr(str));
    });
});

カタカナをひらがなに変換するデモページ
　

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

HTML

1
2
3
4
5
6
<dl>
    <dt>半角カタカナを全角カタカナに変換する</dt>
    <dd>
        <input type="text" name="name" class="sample" />
    </dd>
</dl>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 変換前
var beforeStr = new Array('ｧ','ｨ','ｩ','ｪ','ｫ','ｬ','ｭ','ｮ','ｯ','ｰ','ｳﾞ','ｶﾞ','ｷﾞ','ｸﾞ','ｹﾞ','ｺﾞ','ｻﾞ','ｼﾞ','ｽﾞ','ｾﾞ','ｿﾞ','ﾀﾞ','ﾁﾞ','ﾂﾞ','ﾃﾞ','ﾄﾞ','ﾊﾞ','ﾋﾞ','ﾌﾞ','ﾍﾞ','ﾎﾞ','ﾊﾟ','ﾋﾟ','ﾌﾟ','ﾍﾟ','ﾎﾟ','ｱ','ｲ','ｳ','ｴ','ｵ','ｶ','ｷ','ｸ','ｹ','ｺ','ｻ','ｼ','ｽ','ｾ','ｿ','ﾀ','ﾁ','ﾂ','ﾃ','ﾄ','ﾅ','ﾆ','ﾇ','ﾈ','ﾉ','ﾊ','ﾋ','ﾌ','ﾍ','ﾎ','ﾏ','ﾐ','ﾑ','ﾒ','ﾓ','ﾔ','ﾕ','ﾖ','ﾗ','ﾘ','ﾙ','ﾚ','ﾛ','ﾜ','ｦ','ﾝ');
// 変換後
var afterStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン');
 
function convertStr(str) {
    var fullStr = str;
    for(var i = 0; i < beforeStr.length; i++) {
        fullStr = fullStr.replace(new RegExp(beforeStr[i], 'g'), afterStr[i]);
    }
    return fullStr;
}
$(function() {
    $('.sample').on('blur', function() {
        var str = $(this).val();
        $(this).val(convertStr(str));
    });
 
});

半角カタカナを全角カタカナに変換するデモページ
　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930