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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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