Table of Contents
文章中のカタカナをひらがな、もしくはひらがなをカタカナに変換する 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 で正規表現によって検索し、文字コードをずらすことで文字の置換を行っています。