JavaScriptで全角⇔半角の変換をサンプルコード付き解説!

フォームで入力された文字列が全角や半角がバラバラに入力されてしまうとデータの後処理が大変です。入力された文字列を全角に変換したり、半角に変換したりして統一することができたら便利です。この記事ではJavaScriptで全角⇔半角の変換方法を解説していきます。

コンテンツ [表示]

  1. 1JavaScriptで全角⇔半角の変換を行いたい
  2. 2JavaScriptで全角⇔半角の変換を行う方法
  3. 2.1全角→半角(英数字)
  4. 2.2半角→全角(英数字)
  5. 2.3カタカナ→ひらがな
  6. 2.4ひらがな→カタカナ
  7. 2.5全角→半角(カタカナ)
  8. 2.6半角→全角(カタカナ)
  9. 3まとめ

JavaScriptで全角⇔半角の変換を行いたい

フォームなどで入力欄に入力された文字列を全て全角に変換したり、半角に変換することができたら、ユーザーが全角で入力しようが半角で入力しようが統一させるように変換することができたら便利ですよね。

この記事ではJavaScriptで全角から半角への変換、半角から全角への返還などを行う方法をサンプルコード付きで解説していきます。

Photo byPexels

JavaScriptで全角⇔半角の変換を行う方法

全角半角の変換は英数字の場合とカタカナの場合で処理が異なってくるので、それぞれ解説していきたいと思います。

また、カタカナ⇔ひらがな変換の方法についても解説していきたいと思います。

全角→半角(英数字)

replace関数は第一引数に置換前の文字列を指定します。今回、全角英数字を表現する正規表現で記号からの文字を指定しています。

第二引数には置換後の文字列を指定するのが一般的ですが、無名関数や関数を指定することもできます。その関数の中で加工処理を行うことで文字列を変換することができます。第二引数の関数の引数にはStringオブジェクトの文字列が1文字ずつ順番に渡されます。

charCodeAt関数で渡されてきた全角英数字sの文字コードを取得します。そこから0xFEE0を引くとその文字列の半角の文字コードが得られます。その後、fromCharCode関数で文字コードから文字列を取得します。

このような処理を第一引数の正規表現に一致した全文字列に対して行い、全角から半角に変換することができます。

半角→全角(英数字)

基本的な処理の流れは全角から半角へ変換するときと同じです。

replace関数の第一引数には半角英数字を表す!から~を指定し、半角英数字に0xFEE0を加えることで半角から全角へと変換することができます。

カタカナ→ひらがな

カタカナひらがな変換も英数字の全角半角変換と処理の流れは同じです。

replace関数の第一引数にはカタカナを表現する文字コード\u30a1から\u30f6を指定します。第二引数の無名関数の中ではカタカナの文字コードから0x60を引いた文字コードからひらがなを取得することができます。

ひらがな→カタカナ

replace関数の第一引数にはひらがなを表現する文字コード\u3041から\u3096を指定し、第二引数の無名関数の中ではひらがなの文字コードから0x60を足した文字コードからカタカナを取得することができます。

全角→半角(カタカナ)

まずは全角カタカナをキーとして対応する半角カタカナを値とするオブジェクトを用意します。

次にRegExpのコンストラクタの第一引数には作成したkanaMapオブジェクトのキーを|(パイプライン)で連結した文字列を指定します。第二引数にはフラグのgを指定することで対象となる全ての文字列を置換することが出来るようになります。

最後にreplace関数で全角カタカナの場合には対象の全角カタカナをキーとするkanaMapの値を返すことで、全角カタカナから半角カタカナを取得することが出来ます。

このようにして全角から半角カタカナに変換することが出来ます。

半角→全角(カタカナ)

基本的な処理の流れは全角から半角カタカナへ変換するときと同じです。

オブジェクトを用意する際に半角カタカナをキーとして値を対応する全角カタカナにします。

これで半角カタカナの場合には、replace関数で全角に変換することができます。

まとめ

JavaScriptで全角⇔半角に変換する方法を解説してきました。全角半角変換はユーザビリティを高めるために実装できるようになっておくと方が良いかと思います。ぜひサンプルコードを参考にしてくださいね。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事