にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:51.

入力された全角文字をJavaScriptで半角に変換する方法

日本語環境下では、英字や数字は全角でも半角でも入力が可能です。
メールアドレスやURLなど、たいてい半角で入れそうな文字列でも、全角で入力してしまう方々も居ます。
ウェブ上でそれらの入力を求めるとき、「半角で入力してください」などとユーザに要求するのではなく、ユーザが全角・半角のどちらで入力しても、ウェブサイト側で望みの形式に変換するのが望ましいでしょう。

というわけで、ウェブ上のフォームに入力された全角英数字を、JavaScriptで半角英数字に変換させよう……と思ったんですが、そこそこ面倒ですね。(^_^;)
replaceメソッドを使って、正規表現で一括変換すれば良いと思ったんですが、検索する側の指定はともかく、変換後の文字列をどう指定するか悩みました。^^;

というわけで、ググってみましたところ、とてもスマートな変換方法がありました。
『全角英数記号の文字コードから「0xFEE0」(=65248)を引くと半角英数記号の文字コードになる』というUnicodeの仕様を利用して、

s.charCodeAt(0) - 0xFEE0

のように記述する方法です。
なるほど、これは楽ですね!

例えば、全角の「A」はUnicodeでは「0xFF21」です。
半角の「A」はUnicodeでは「0x41」です。
これらを引き算すると、0xFEE0 になります。
この差(0xFEE0)は、英字だけでなく、数字・記号(※キーボードから直接打てるようなASCII文字にある記号)でも同じです。

charCodeAtメソッドは、Unicodeでの文字コードを返すメソッドです。
なので、実際のウェブページで使われている文字コードがSHIFT-JISやEUC-JPであっても、Unicodeの文字コードの値が返ります。なので、実際に入力される文字の文字コードを気にせず、単純に「0xFEE0」を引き算するだけで変換できます。

引き算で「半角文字の文字コード」を得たら、以下のようにfromCharCodeメソッドで文字に変換すれば完了です。

String.fromCharCode(s.charCodeAt(0) - 0xFEE0);

fromCharCodeメソッドは、引数に指定した数値をUnicodeの文字コードだと解釈して、対応する文字を返すメソッドです。
いやあ、便利ですね。^^;
このcharCodeAt、fromCharCodeメソッドを利用する方法で、英字・数字・記号に関しては全角・半角の相互変換が簡単にできます。

全角・半角変換のJavaScriptソース全体は、以下のページを参照してください。

JavaScript による半角と全角の相互変換(カタカナを除く)完成版(@logical error)
JavaScriptで全角英数と半角英数の相互変換(@Rewish@hatena)

ただ、残念ながら、カタカナはこの方法では対処できないのですよね……。
この「0xFEE0を引く」という簡単な引き算で全角・半角の相互変換が可能なのは、半角文字でも全角文字でも、『文字の並び順は同じ』という仕様があるからこそなんですが、カタカナの場合は、なぜか全角と半角では並び順が異なります。

半角カタカナは、
ァ(0xff67) ィ(0xff68) ゥ(0xff69)…… ア(0xff71) イ(0xff72) ウ(0xff73)……
のような順序で並んでいるんですが、
全角カタカナは、なぜか、
ァ(0x30a1) ア(0x30a2) ィ(0x30a3) イ(0x30a4) ゥ(0x30a5) ウ(0x30a6)……
のような順序で並んでいるんですよね。

なので、単純な引き算では変換できないという……。(^_^;;;
どうしてこんな仕様になったんでしょうか。(^_^;;;

まあ、仮に並び順が同じだったとしても、濁点・半濁点の問題があるので、結局は単純に引き算では変換できないんですけども。
全角文字では「ガギグゲゴ」のような濁点付きの文字もそれぞれ1文字で表現できますが、半角文字では「ガギグゲゴ」のように濁点は独立した1バイトの文字(0xff9e)ですから。

カタカナを半角・全角で変換するには、それぞれの配列を作って比較していくしかないみたいですね。(^_^;;;
ググってみると、例えば、以下のようなJavaScriptソースがありました。

半角カナを全角カナに変換する

あと、以下のページもとても参考になりました。

JavaScriptによる英数字/記号/カタカナの全角半角変換(@ディストレイド)

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---