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

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

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

HTML

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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

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

JavaScript

// 変換前
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));
	});

});

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

【参考サイト】

• JavaScriptで全角英数と半角英数の相互変換 – Rewish@hatena
• 正規表現を使ったマッチングに変数を使用する | jstarted.com
• カタカナをひらがなに一括変換する – JavaScript TIPSふぁくとりー