Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:47.

カタカナをひらがなに一括変換する

ユーザに名前とフリガナの入力を求めたとき、フリガナをカタカナで書かれる場合もあれば、ひらがなで書かれる場合もあります。「カタカナで書いて下さい」と指定していても、ひらがなで書かれるかも知れません。そんなときは、どちらで入力されてもスクリプト側で自動統一(自動変換)するようにしておけば、ユーザに面倒をかけなくて済みます。

ユーザが入力した「ひらがな」または「カタカナ」を、JavaScriptを使って一括してどちらかに変換するには、正規表現を使って一括置換するのが簡単です。文字列中に含まれる「ひらがな」や「カタカナ」をすべて一括して相互に変換できます。

正規表現を使って、ひらがなをカタカナに一括変換する方法

Unicodeの文字コードでは、

  • カタカナの「ア」の文字コードは、「0x30a2」です。「ン」は「0x30f3」です。
  • ひらがなの「あ」の文字コードは、「0x3042」です。「ん」は「0x3093」です。

両者の差は、(16進数で)60です。(10進数だと96。)
文字コード表の中で、ひらがなの「あいうえお……」とカタカナの「アイウエオ……」は、同じ順番で並んでいます。
というわけで、単純に

  • 「カタカナ」の文字コードから「0x60」を引けば、「ひらがな」に変換できます。
  • 逆に、「ひらがな」の文字コードに「0x60」を足せば、「カタカナ」に変換できます。

例えば、変数TargetStringに格納されている文字列に対して、すべての「ひらがな」を「カタカナ」に置き換えるには、以下のようにJavaScriptを記述すると良いでしょう。

TargetString = TargetString.replace(/[ぁ-ん]/g, function(s) {
   return String.fromCharCode(s.charCodeAt(0) + 0x60);
});

文字列を格納した変数のreplaceメソッドを呼び出して、第1引数に「置換対象の文字」を正規表現で記述しています。ここでの「置換対象の文字」は「ひらがな全部」ですので、/[ぁ-ん]/ と記述しています。
このとき「あ」ではなく「ぁ」から対象にしている点に注意して下さい。文字コード表では、ひらがなは「あ」ではなく「ぁ」から始まっていますので。
(Unicodeの場合は、ぁあぃいぅうぇえぉお……のような順序で並んでいます。)
正規表現の最後にグローバル修飾子「g」を記述しているので、対象文字列の中に記号が何個あっても、すべてが変換されます。(この「g」を省略すると、最初に見つかった1つだけしか変換されないので注意して下さい。)

第2引数には、「置換後の文字列」を渡せば良いだけです。ここではちょっとややこしいことをしていますが、

  • 正規表現にマッチした文字の文字コードをcharCodeAtメソッドで得て、
  • そのコードに、0x60(=16進数での60)を足して、
  • その数値を文字コードとして解釈して該当する文字を返すfromCharCodeメソッドを呼び出して、
  • 得られた文字を返しております。

それが、「置換後の文字列」になっているわけです。
実際に表示させてみたサンプルは以下の通り。

対象文字列:

結果文字列:

上記のサンプルでは、ボタンをクリックすると入力された文字列内に含まれるひらがな文字だけがカタカナ文字に変換されます。
それ以外の文字はそのままです。

正規表現を使って、片仮名を平仮名に一括変換する

逆に、片仮名を平仮名に統一するのも同様にできます。先ほどは0x60を足しましたが、今度は引けばよいわけです。
例えば、変数TargetStringに格納されている文字列に対して、すべての「カタカナ」を「ひらがな」に置き換えるには、以下のようにJavaScriptを記述すると良いでしょう。

TargetString = TargetString.replace(/[ァ-ン]/g, function(s) {
   return String.fromCharCode(s.charCodeAt(0) - 0x60);
});

実際に表示させてみたサンプルは以下の通り。

対象文字列:

結果文字列:

ユーザに要求せずに、スクリプトで望みの形に統一しておけば面倒がない

ユーザが入力したフリガナ文字列を、「カタカナ」か「ひらがな」のどちらかに統一する必要がある場面もあるでしょう。あとからソートしたい場合とか。まあ、単純にデータの見栄えを整えたいとか。^^;
ユーザに「カタカナで入力して」と言うよりは、上記のように望みの方に自動で統一するようスクリプトを書いておくと、ユーザに手間を掛けずに済む上、ユーザのミスによって望みのデータが手に入らない事態も減らせるんではないでしょうか。

なお、今回のスクリプトで対象にしているのは全角カタカナだけです。これに半角カタカナとの変換を加えようと思うと、結構面倒くさいです。それは、また別の機会に。(^_^;;;

なお、JavaScriptで正規表現を使う方法は、「JavaScriptで正規表現を使う」で解説しています。
また、JavaScriptで正規表現を使って文字列を置き換える方法は、「正規表現を使って文字列を置換する方法」で解説しています。
それらも併せてご参照下さい。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど