サイト制作に関するメモ書き

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

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

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

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

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(/[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));
	});

});

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

【参考サイト】

 

“inputに入力した文字を決められた形に変換する” への1件のコメント

  1. […] inputに入力した文字を決められた形に変換するhttp://cly7796.net/wp/javascript/to-convert-the-characters-entered-in-the-input/フォームなどで入力した文字列を、あらかじめ決められた形に変換してみます […]

コメントを残す

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

▲PAGE TOP