[JavaScript] カタカナとひらがなを相互変換するスクリプトとサンプル

2019年11月17日(更新: 2019年11月17日)

文章中のカタカナをひらがな、もしくはひらがなをカタカナに変換する JavaScript のサンプルです。

サンプルページ

実際の動作の例は以下のページを御覧ください。

カタカナ⇔ひらがな変換ツール

相互変換のスクリプト

上記サンプルページのソースコードのうち、ひらがなとカタカナの変換に関わる部分は以下のようになります。


…

<body>
	<form name="inputform">
		<input type="radio" name="type" value="KtoH" id="KtoH" checked><label for="KtoH">カタカナからひらがな</label><br>
		<input type="radio" name="type" value="HtoK" id="HtoK"><label for="HtoK">ひらがなからカタカナ</label><br><br>
		<label for="original">変換する文章</label><br>
		<textarea id="original" name="original"></textarea><br>
		<label for="result">結果</label><br>	
		<textarea id="result" name="result"></textarea><br>
		<button name="convertButton">変換</button><br><br>
	</form>
	<script>
		var targetForm = document.forms[0];
		var button = targetForm.convertButton;
		button.addEventListener('click', function(e) {
			e.preventDefault();

			var convertType = targetForm.type.value;
			var inputString = targetForm.original.value;

			switch(convertType) {
				case "KtoH":
					targetForm.result.value = inputString.replace(/[ァ-ン]/g, function(s) {
   						return String.fromCharCode(s.charCodeAt(0) - 0x60);
					});
					break;
				case "HtoK":
					targetForm.result.value = inputString.replace(/[ぁ-ん]/g, function(s) {
   						return String.fromCharCode(s.charCodeAt(0) + 0x60);
					});
					break;
				default:
			}
		}, false);
	</script>
</body>

…

フォーム要素に入力されたテキストをスクリプトで取得し、その中からひらがなもしくはカタカナをメソッド replace で正規表現によって検索し、文字コードをずらすことで文字の置換を行っています。

コメントを残す

メールアドレスが公開されることはありません。