Jqueryで全角文字を半角に変換する

2023年10月17日

webシステムでは全角文字を半角に変換することはよくあります。
フォームの郵便番号入力など、半角数字前提の入力欄に全角が入力された場合、自動で半角に変換するなどです。

PHPならば、mb_convert_kana()関数で実現できます。
これを今回、Jqueryだけで実現する必要がありました。

そこで、いつものごとくググって調べて対処いたしました。
忘備録として記録いたします。

まずはできたものがこちら

実際にできたものがこちらです。

フォームに全角数字、アルファベットを入力し、変換ボタンを押すと半角に変換してくれます。

ソースはこちら

疑問：理屈がさっぱりわかりません！

ググってみると、Jqueryだけで全角半角変換する方法がすぐ見つかりました。
何も考えずにコピーするだけで動作しましたが、疑問がわきました。

どういう理屈で変換できているのか？

PHPの場合は、関数で一発変換してくれます。
しかし、Jqueryの場合は何やらいろんな細工をしています。

いわゆる力技で変換しています。
気になったので、変換の理屈について調べてみました。

Jqueryで全角半角変換を実現する理屈

ソースを見ただけだとさっぱり意味が分かりません。
ですが、ひとつひとつ何をしているのかわかると、単純な理屈で全角半角変換していることがわかりました。

変換部分のソース

ソースを見ただけではさっぱりです。
特に、見たことのない関数が使用されており、何をしているのか想像もつきません。
ただ、関数の意味が分かると、変換の理屈が理解できました。

（１）text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, ってなに？

textは、直前で入力文字を格納した変数です。
この入力文字（text）に対して、文字を上書きしています。

(/[Ａ-Ｚａ-ｚ０-９]/g　は、正規表現で全角数字、アルファベットであったら次の値に上書きという意味です。

（２）s.charCodeAt(0)　ってなに？

文字を文字コードに変換します。
端的に言うと、文字を数値化します。

「s.」は、引数として文字「s」が渡されており、渡された文字を数値化しています。
引数が「０」なのは、一文字目という意味です。

（３）65248を引き算しているのはなぜ？

これは全角文字コードと、半角文字コードの差分が「65248」個であるため、全角文字コードから65248減算すれば半角文字コードになります。

逆を行えば、半角→全角変換ができます。

（４）String.fromCharCode　ってなに？

この関数は、数値化された文字コードを文字に変換します。
減算により全角→半角に変換した文字コードを文字に戻しています。

String.　は、文字列という意味です。
return で記述しているため、文字列であることをキャストしています。

ちなみに半角→全角変換もできます。

今回のことを応用すれば、半角を全角に変換することもできます。
半角→全角変換サンプル

ソースはこちら

理屈がわかると理解できます

最近は、ググって見つけた記述をコピーするだけで動作します。
それはそれで解決できるのですが、問題点が発生したときに修正ができずに悩むことになります。

なぜならば理屈を理解していないため、どこを直せばよいかわからないためです。

わからないところは理解する。
これをやることで、本当の技術と知識が得られます。