Javascriptで禁則処理をする（その２）

Ajax XHR Javascript YUI2.7.0 MyConverter PHP

以前、作ったJavascriptでのコンバータ（禁則文字の置き換え目的）だが、あるアプリで使ったついで修正を加えた。

この間のプログラムの以下の問題点を改善した。
１．禁則文字が続いた場合、■１つに置換されてしまう。
２．■に置換するのは格好悪いので、化けそうも無い文字(列）に置換した方が使い勝手がいい。

ということで、以下の２点を改善してみた。

禁止する文字は以下のものとした。


これを置換する文字は、それぞれ、

1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20
1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,（株）,（有）,cm,kg,-

とした。

以下にスクリーンショットを示す。テキストエリアへの不正な入力（上段）を、２通りの変換で補正したものが下段。下段のテキストエリアでは、まず、禁止文字を■で置換し、その後、置換文字で置換してある。

以下に、コンバータ（Javascriptオブジェクト）のソースを示す。以下のソース中、illegalCharsReg、illegalCharsが文字化けしているが、この部分は上の禁止文字列である。
上の例では、入力値を、まずconvertIllegal()で変換し、その戻り値に、convertToRegalChar()の戻り値をappendしている。

/**
 * MyConverter.js
 * 
 * (C) 2009, tetsuya.odaka(EzoGP).
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
var MyConverter = function() {

	// 禁止文字のregex
	this.illegalCharsReg =/[����������������������������������〜]/g;
	// 禁止文字の羅列
	this.illegalChars ='����������������������������������〜';
	// 置換文字の配列
	this.legalChars = new Array(
		1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,
		1,2,3,4,5,6,7,8,9,10,
		1,2,3,4,5,6,7,8,9,10,
		'（株）','（有）','cm','kg','-'
	);
	
     /**
     * 禁則処理を行うメソッド
     *	禁止文字を■で置き換える。
     * 
     * @param
     *     		_str; 	置換対象の文字列
     * @return
     * 			置換後の文字列
     */

     this.convertIllegal = function(_str){
		// コンバート
		return _str.replace(this.illegalCharsReg,'■');
    };
    
     /**
     * 禁則処理を行うメソッド
     *	禁止文字を、適当な文字列で置き換える。
     * 
     * @param
     *     		_str; 	置換対象の文字列
     * @return
     * 			置換後の文字列
     */
    this.convertToRegalChar = function(_str){

	//文字列から置換する文字を取り出す
    	var _mArr = _str.match(this.illegalCharsReg);

		if(_mArr){
		    //置換する文字に対応する、legalなCharを配列に入れる。
    		    var _pArr = new Array();
    		    for(var i=0; i < _mArr.length; i++){
        		var _place = this.illegalChars.indexOf(_mArr[i],0);
	        	_pArr.push(this.legalChars[_place]);
    		    }

	    	    //順に置換していく
    		    for(var i=0; i < _mArr.length; i++){
		       // 動的にregexを作るには、RegExpを使った方が無難。
	    	       var _rStr = new RegExp(String(_mArr[i]),"g");
    	    	       _str = _str.replace(_rStr, _pArr[i]);
	    	    }
		}
    	return _str;
    };
    
    /* 自身の参照値を返却 */
    return this;
};


以下に、HTMLの全文を示す。このHTMLでは、TEXTAREAからフォーカスを外すと置換が起きるようにしている。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>MyConverter</TITLE>

<style type="text/css">
</style>
<!-- 読み込むjs --> 
<script type="text/javascript" src="../scripts/lib/yui/build/yahoo/yahoo-min.js">
</script>
<script type="text/javascript" src="../scripts/lib/yui/build/yahoo-dom-event/yahoo-dom-event.js">
</script>

<!-- MyConverter.jsの読み込み -->
<script type="text/javascript" src="MyConverter.js">
</script>

<script type="text/javascript">
/*
 * コンバート検証
 *  （モジュールパターンで実装）
 */
convert = function() {
	var cnvObj;
	var	Dom 	= YAHOO.util.Dom;	
	var	Event 	= YAHOO.util.Event;
		
	/**
	* Inputからフォーカスが外れたときのハンドラー
	*/
	var onBlurHdlr = function(_evt,_obj){
		
		_e = YAHOO.util.Event.getTarget(_evt)
		var _id = _e.id;
		var _resId = _id + '_res';
		
		// 検証対象を取得.
		var _str  = Dom.get(_id).value;
		
		var _ret = cnvObj.convertIllegal(_str);
		var _ret1 = cnvObj.convertToRegalChar(_str);

		Dom.get(_resId).innerHTML = _ret;
		Dom.get(_resId).innerHTML += '\n'+ _ret1;

	};
	
	return {
	    /**
  	    * 初期処理
 	    */
    	    init: function() {
    	
		cnvObj = new MyConverter();	

		var _inObj = document.getElementsByTagName('textarea');
		for(var i = 0; i < _inObj.length; i++){
			Event.addBlurListener(_inObj[i].id, onBlurHdlr, _inObj[i]);		    
		}
			
	    } // initの終わり
       };
}();

</script> 

</HEAD>
<BODY onload="convert.init()">
test_convert3.html
<h3>
クライアントサイドでのコンバート確認用
</h3>

<form method="post" action='#'>
<!--// 入力検証項目 -->

入力；<br>
<textarea id="area1" cols=50 rows=8></textarea><br>
<br>
出力；<br>
<textarea id="area1_res" cols=50 rows=10></textarea>


</form>

<br>
</body>
</HTML>