忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/06/27 05:36 |
JavaScript1-2:全角半角変換関数

実用的なサブルーチンを作ってみましょう。
サブルーチンと関数はほぼ同義語なので今後混ざって出てきても気にしないで下さい。
ちなみにJavaScriptではクラスも関数とほぼ同義だったりします。

あらゆる言語で問題になるのが日本語対応です。
その第一が文字化けで、第二が全角半角の対応です。
全角の「0」と半角の「0」は当然ながら違う文字として認識されます。

そこで問題になるのがフォーム等の入力値です。
たとえば住所欄など、全角に統一して扱いたい入力欄があるとき、
よくある解決法のひとつが「半角文字が入っていたら入力させなおす」です。
しかしこれはユーザビリティ的には最悪です。
Atok等、数値記号は自動的に半角入力してくれるIMEを使用していた場合、そのようなフォームに突き当たったらわざわざ設定を変更しなければなりません。
そんな酔狂に付き合ってくれるユーザーは少ないでしょう。
全角半角変換程度のことはフォーム側で処理してあげるべきです。

さて、PHPではphp mb_convert_kanaという命令一発で非常に容易に変換できます。
PerlでもEncodeやjcodeというモジュールが用意されており簡単に使用できます。
しかし何故かJavaScriptには簡単に変換する方法が存在しません。
もっとも、さほど難しくはないので作ってしまいましょう。

とりあえず数値を半角から全角に変換するスクリプトです。
単純に、charAtを使用して、入力文字列に変換対象文字が見つかったら入れ替えているだけです。

convertInt.js

function convertInt(input){
        var hanList = "0123456789";
        var zenList = "0123456789";
      
        var str = "";
        var oneStr;
        var i;
        var c;
        var n;
        
        for(i=0;i<input.length;i++){
            oneStr=input.charAt(i);
            n = hanList.indexOf(oneStr,0);
            c = n>=0 ? zenList.charAt(n) : oneStr;    //三項演算子
            str+=c;
        }
        return str;
}


使用時は、普通に
var output=convertInt(input);
と書くだけです。

さて、どちらかというと全角入力された英数字を半角に変換することが多いと思います。
どちらの場合でも使えるよう入力値に変換方向も書き加えてしまいましょう。

convertStr.js

function convertStr(input,flag){

    var hanList = "0123456789";
        hanList += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        hanList += "abcdefghijklmnopqrstuvwxyz";
        hanList += "-+_@. /[]()'!~*;?:&=$,%#";
    var zenList = "0123456789";
        zenList += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        zenList += "abcdefghijklmnopqrstuvwxyz";
        zenList += "-+_@. /[]()’!~*;?:&=$,%#";

        if(flag == false){
             var tmp=hanList;
             hanList=zenList;
             zenList=tmp;
        }

    var str = "";
    var i;var c;var n;var oneStr;
    
    for(i=0;i<input.length;i++){
        oneStr=input.charAt(i);
        n = zenList.indexOf(oneStr,0);
        c = n>=0 ? hanList.charAt(n) : oneStr;
        str+=c;
    }
    return str;
}


var output=convertStr(input,true);
として使用します。
第二引数にfalseを設定すると半角を全角に変換し、それ以外だと全角から半角に変換します。

次回はこのライブラリを使用してフォームのバリデートを行ってみましょう。

PR


2008/05/13 12:53 | Comments(0) | TrackBack(0) | JavaScript

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<PHP1-9:クラス | HOME | PHP2-2:投稿フォームを作ろう>>
忍者ブログ[PR]