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));
	});

});

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

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

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

JavaScriptでよく使う全角・半角を変換するスクリプト(メモ) | Minory へ返信する コメントをキャンセル

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

CAPTCHA


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

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31