728x90

[실행결과]

[소스코드]

<!DOCTYPE html>
<html>
<head>
<title>데모</title>
<style>
    .divTbl     { display: table; width: 100%; }
    .divTblRow  { display: table-row; }
    .divTblCell { display: table-cell; border: 1px solid #999999; padding: 3px 10px; }
    button   { line-height: 17px; margin-top: 10px; }
    textarea { height: 314px; width: 615px; position: fixed; }
</style>
<script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script>
<script>
var com = {
    utils : {}
};

com.utils = {
    
    /**
     * @description 전화번호 포멧으로 리턴한다. ( /2~3/ - /3~4/ - /4/ )
     * @param {string} value 값
     * @return {string} 전화번호 포멧이 적용된 문자열
     */
    telFormat: function ( obj ) {
        var s = obj.value;
        var result = '';
        var numArray = new Array();

        if (s) {
            s = s.replace(/[^0-9]/g, "");

            if( s.startsWith('02') ){
                numArray.push(s.substr(0, 2));
                s = s.substring(2);
            }else{
                numArray.push(s.substr(0, 3));
                s = s.substring(3);
            }

            if( s.length == 7 ){
                numArray.push(s.substr(0, 3));
                numArray.push(s.substr(3));
            }else{
                if( s.length > 8 ){
                    s = s.substring(0, 8);
                }
                numArray.push(s.substr(0, 4));
                numArray.push(s.substr(4));
            }

            result = numArray.filter((val) => val).join("-");

        } else {
            result = s;
        }

        // Log
        $('#txtLog').append('입력값 : |' + obj.value + '| >> 출력값 : |' + result + '| \n'); 

        obj.value = result;
    }

};
</script>
</head>
<body>
<h1>전화번호 포멧 처리</h1>
<div class="divTbl" style="height:330px;">
    <div class="divTblRow">
        <div class="divTblCell" style="width:200px;">

            <input type="text" id="tel" name="tel" onkeyup="com.utils.telFormat(this)" value=""><br/>
            <input type="text" id="tel" name="tel" onkeyup="com.utils.telFormat(this)" value=""><br/>

        </div>
        <div class="divTblCell" style="width:500px">
            <textarea id='txtLog'></textarea>
        </div>
    </div>
<div>
</body>
</html>

[첨부파일]

telFormat.html
0.00MB

 

728x90
반응형
728x90

[실행결과]

[소스코드]

<!DOCTYPE html>
<html>
<head>
<title>데모</title>
<style>
	.divTbl     { display: table; width: 100%; }
	.divTblRow  { display: table-row; }
	.divTblCell { display: table-cell; border: 1px solid #999999; padding: 3px 10px; }
	button   { line-height: 17px; margin-top: 10px; }
	textarea { height: 314px; width: 615px; position: fixed; }
</style>
<script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script>
<script>
var com = {
	utils : {}
};

com.utils = {

	/**
	* @description 차량번호 마스킹하는 함수.
	* @param {string} 차량번호 (66나0570) 
	* @param {string} 마스킹 타입(RRN, EMAIL, CARD, ID, NAME, PHONE 기타등등)
	* @return {string} 마스킹 처리된 문자열
	*/
	makeMask: function (t, s) {
	
		var maskedValue = '';

		switch (t) {

			// 차량번호 00나1234
			case 'VRN' :

				if(s.match(/\d{2,3}[가-힣]{1}\d{4}/gi)){
					maskedValue = s.toString().replace(/([0-9]{4})$/gi,'****');
				}
			break;

		}
		
		// Log
		$('#txtLog').append('입력값 : |' + s + '| >> 출력값 : |' + maskedValue + '| \n\n'); 

		return maskedValue;
  },

};
</script>
</head>
<body>
<h1>차량번호 마스킹 처리</h1>
<div class="divTbl" style="height:330px;">
	<div class="divTblRow">
		<div class="divTblCell" style="width:200px;">

			<button onclick="com.utils.makeMask('VRN', '66나0570')">
				차량번호(66나0570)
			</button><br/>
			<button onclick="com.utils.makeMask('VRN', '666다1234')">
				차량번호(666다1234)
			</button><br/>


		</div>
		<div class="divTblCell" style="width:500px">
			<textarea id='txtLog'></textarea>
		</div>
	</div>
<div>
</body>
</html>

[첨부파일]

vrn.html
0.00MB

 

728x90
반응형
728x90

계좌번호 마스킹 샘플을 만들면서 알게된 사실..

은행별로 계좌번호 포멧이 다르다.. 알고는 있었는데 이렇게 다를 줄이야..

링크는 공유할테니 내용참고하고 아래 소스를 참고하길 바란다.

https://sealove3904.tistory.com/22

 

국내은행별 계좌번호 체계

계좌번호 마스킹 처리를 구현하다보니 은행마다 계좌번호 체계가 달라 공유한다. 은행 길이 포멧 BNK부산은행 13 AAA-BBBB-CCCC-DD DGB대구은행 12 AAA-BB-CCCCCC-D IBK기업은행 14 AAA-BBBBBB-CC-DDD KEB하나은..

sealove3904.tistory.com

 

 

[실행결과]

[소스코드]

<!DOCTYPE html>
<html>
<head>
<title>데모</title>
<style>
	.divTbl     { display: table; width: 100%; }
	.divTblRow  { display: table-row; }
	.divTblCell { display: table-cell; border: 1px solid #999999; padding: 3px 10px; }
	button   { line-height: 17px; margin-top: 10px; }
	textarea { height: 314px; width: 615px; position: fixed; }
</style>
<script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script>
<script>
var com = {
	utils : {}
};

com.utils = {

	/**
	* @description 계좌번호 마스킹하는 함수.
	* @param {string} 계좌번호 (800320-1234567) 
	* @param {string} 마스킹 타입(RRN, EMAIL, CARD, ID, NAME, PHONE 기타등등)
	* @return {string} 마스킹 처리된 문자열
	*/
	makeMask: function (t, s) {
	
		var maskedValue = '';

		switch (t) {
			// KEB하나은행 / AAA-BBBBBB-CCCCC
			case 'KEB' :

				if(s.match(/(\d{3}-\d{6}-\d{5})/gi)){
					maskedValue = s.toString().replace(/(\d{3})-(\d{3})(\d{3})-(\d{5})/gi,'$1-$2***-*****');
				}
			break;
			// KB국민은행 / AAA-BB-CCCC-DDD
			case 'KB' :

				if(s.match(/(\d{3}-\d{2}-\d{4}-\d{3})/gi)){
					maskedValue = s.toString().replace(/(\d{3})-(\d{2})-(\d{2})(\d{2})-(\d{3})/gi,'$1-$2-$3**-***');
				}
			break;
			// 카카오뱅크 / AAAA-BB-CCCCCCC
			case 'KKO' :

				if(s.match(/(\d{4}-\d{2}-\d{6})/gi)){
					maskedValue = s.toString().replace(/(\d{4})-(\d{2})-(\d{6})/gi,'$1-$2-******');
				}
			break;

		}
		
		// Log
		$('#txtLog').append('입력값 : |' + s + '| >> 출력값 : |' + maskedValue + '| \n\n'); 

		return maskedValue;
  },

};
</script>
</head>
<body>
<h1>계좌번호(은행별) 마스킹 처리</h1>
<div class="divTbl" style="height:330px;">
	<div class="divTblRow">
		<div class="divTblCell" style="width:200px;">

			<button onclick="com.utils.makeMask('KEB', '320-198003-12345')">
				KEB하나은행(320-198003-12345)
			</button><br/>
			<button onclick="com.utils.makeMask('KB', '198-03-2019-123')">
				KB국민은행(198-03-2019-123)
			</button><br/>
			<button onclick="com.utils.makeMask('KKO', '1234-12-123456')">
				카카오뱅크(1234-12-123456)
			</button>


		</div>
		<div class="divTblCell" style="width:500px">
			<textarea id='txtLog'></textarea>
		</div>
	</div>
<div>
</body>
</html>

[첨부파일]

account.html
0.00MB

 

 

 

 

 

 

 

728x90
반응형
728x90

[실행결과]

[소스코드]

<!DOCTYPE html>
<html>
<head>
<title>데모</title>
<style>
	.divTbl     { display: table; width: 100%; }
	.divTblRow  { display: table-row; }
	.divTblCell { display: table-cell; border: 1px solid #999999; padding: 3px 10px; }
	button   { line-height: 17px; margin-top: 10px; }
	textarea { height: 314px; width: 615px; position: fixed; }
</style>
<script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script>
<script>
var com = {
	utils : {}
};

com.utils = {

	/**
	* @description 주민등록번호 마스킹하는 함수.
	* @param {string} 주민등록번호 (800320-1234567) 
	* @param {string} 마스킹 타입(RRN, EMAIL, CARD, ID, NAME, PHONE 기타등등)
	* @return {string} 마스킹 처리된 문자열
	*/
	makeMask: function (t, s) {
	
		var maskedValue = '';

		switch (t) {

			case 'RRN' :
				if( s.match(/(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4]{1}[0-9]{6}\b/gi) ){
					maskedValue = s.toString().replace(/(-?)([1-4]{1})([0-9]{6})\b/gi,"$1$2******");
				}
			break;

		}
		
		// Log
		$('#txtLog').append('입력값 : |' + s + '| >> 출력값 : |' + maskedValue + '| \n\n'); 

		return maskedValue;
  },

};
</script>
</head>
<body>
<h1>주민등록번호 마스킹 처리</h1>
<div class="divTbl" style="height:330px;">
	<div class="divTblRow">
		<div class="divTblCell" style="width:200px;">

			<button onclick="com.utils.makeMask('RRN', '111111-1234567')">
				주민번호 앞 7자리 표시
			</button>
			<button onclick="com.utils.makeMask('RRN', '800320-1234567')">
				주민번호 앞 7자리 표시
			</button>

		</div>
		<div class="divTblCell" style="width:500px">
			<textarea id='txtLog'></textarea>
		</div>
	</div>
<div>
</body>
</html>

 

[첨부파일]

rrn.html
0.00MB

 

 

728x90
반응형
728x90

[실행결과]

[소스코드]

<!DOCTYPE html>
<html>
<head>
<title>데모</title>
<style>
	.divTbl     { display: table; width: 100%; }
	.divTblRow  { display: table-row; }
	.divTblCell { display: table-cell; border: 1px solid #999999; padding: 3px 10px; }
	button   { line-height: 17px; margin-top: 10px; }
	textarea { height: 314px; width: 615px; position: fixed; }
</style>
<script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script>
<script>
var com = {
	utils : {}
};

com.utils = {

	/**
	* @description 카드번호 마스킹하는 함수.
	* @param {string} 카드번호(ex:0000-0000-0000-0000)
	* @param {string} 마스킹 타입(EMAIL, CARD, ID, NAME, PHONE 기타등등)
	* @return {string} 마스킹 처리된 문자열
	*/
	makeMask: function (t, s) {
	
		var maskedValue = '';

		switch (t) {

			case 'CARD' :
				if( s.match(/(\d{4})-(\d{4})-(\d{4})-(\d{4})/gi) ){
					// 카드번호 앞 4자리, 뒤 4자리 표시 : 1000-5678-0987-6543 >> 1000-****-****-6543 
					//maskedValue = s.toString().replace(/(\d{4})-(\d{4})-(\d{4})-(\d{4})/gi,"$1-****-****-$4");
					// 카드번호 앞 6자리, 뒤 4자리 표시 : 1000-5678-0987-6543 >> 1000-56**-****-6543
					maskedValue = s.replace(/(\d{4})-(\d{2})(\d{2})-(\d{4})-(\d{4})/gi,"$1-$2**-****-$5");
				}
			break;

			case 'CARDNUM' :
				if( s.match(/(\d{2})\/(\d{2})/gi) ){
					// 카드 유효기간 모두 별표 표시
					maskedValue = s.replace(/(\d{2})\/(\d{2})/gi,"**/**");
				}
			break;

		}
		
		// Log
		$('#txtLog').append('입력값 : |' + s + '| >> 출력값 : |' + maskedValue + '| \n\n'); 

		return maskedValue;
  },

};
</script>
</head>
<body>
<h1>카드번호/유효기간 마스킹 처리</h1>
<div class="divTbl" style="height:330px;">
	<div class="divTblRow">
		<div class="divTblCell" style="width:200px;">

			<button onclick="com.utils.makeMask('CARD', '7234-5678-0987-6543')">
				카드번호 앞 6자리, 뒤 4자리 표시
			</button>
			<button onclick="com.utils.makeMask('CARD', '7000-2000-3000-4000')">
				카드번호 앞 6자리, 뒤 4자리 표시
			</button>
			<button onclick="com.utils.makeMask('CARDNUM', '22/34')">
				카드 유효기간 모두 별표 표시
			</button>
			<button onclick="com.utils.makeMask('CARDNUM', '22/15')">
				카드 유효기간 모두 별표 표시
			</button>

		</div>
		<div class="divTblCell" style="width:500px">
			<textarea id='txtLog'></textarea>
		</div>
	</div>
<div>
</body>
</html>

[첨부파일]

maskCard.html
0.00MB

728x90
반응형
728x90

실행결과 화면은

카드번호 앞6자리, 뒤4자리만 표기한 예제이다.

소스 주석을 참고하면 추가로 카드번호 앞4자리, 뒤4자리만 표기하는 정규식이 있으니 참고바란다.

 

[실행결과]

[소스코드]

<!DOCTYPE html>
<html>
<head>
<title>데모</title>
<style>
	.divTbl     { display: table; width: 100%; }
	.divTblRow  { display: table-row; }
	.divTblCell { display: table-cell; border: 1px solid #999999; padding: 3px 10px; }
	button   { line-height: 17px; margin-top: 10px; }
	textarea { height: 314px; width: 615px; position: fixed; }
</style>
<script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script>
<script>
var com = {
	utils : {}
};

com.utils = {

	/**
	* @description 카드번호 마스킹하는 함수.
	* @param {string} 카드번호(ex:0000-0000-0000-0000)
	* @param {string} 마스킹 타입(EMAIL, CARD, ID, NAME, PHONE 기타등등)
	* @return {string} 마스킹 처리된 문자열
	*/
	makeMask: function (t, s) {
	
		var maskedValue = '';

		switch (t) {

			case 'CARD' :
				if( s.match(/(\d{4})-(\d{4})-(\d{4})-(\d{4})/gi) ){
					// 카드번호 앞 4자리, 뒤 4자리 표시 : 1000-5678-0987-6543 >> 1000-****-****-6543 
					//maskedValue = s.toString().replace(/(\d{4})-(\d{4})-(\d{4})-(\d{4})/gi,"$1-****-****-$4");
					// 카드번호 앞 6자리, 뒤 4자리 표시 : 1000-5678-0987-6543 >> 1000-56**-****-6543
					maskedValue = s.replace(/(\d{4})-(\d{2})(\d{2})-(\d{4})-(\d{4})/gi,"$1-$2**-****-$5");
				}
			break;

		}
		
		// Log
		$('#txtLog').append('입력값 : |' + s + '| >> 출력값 : |' + maskedValue + '| \n\n'); 

		return maskedValue;
  },

};
</script>
</head>
<body>
<h1>카드번호 마스킹 처리</h1>
<div class="divTbl" style="height:330px;">
	<div class="divTblRow">
		<div class="divTblCell" style="width:200px;">

			<button onclick="com.utils.makeMask('CARD', '7234-5678-0987-6543')">
				카드번호 앞 6자리, 뒤 4자리 표시
			</button>
			<button onclick="com.utils.makeMask('CARD', '7000-2000-3000-4000')">
				카드번호 앞 6자리, 뒤 4자리 표시
			</button>

		</div>
		<div class="divTblCell" style="width:500px">
			<textarea id='txtLog'></textarea>
		</div>
	</div>
<div>
</body>
</html>

 

[첨부파일]

maskCard.html
0.00MB

 

 

 

카드번호 유효기간 마스킹 처리는 아래 링크 참고하길 바란다.

 

https://sealove3904.tistory.com/20

 

[자바스크립트] 카드 유효기간 마스킹 처리하기

[실행결과] [소스코드] <!DOCTYPE html> 데모 카드번호/유효기간 마스킹 처리 카드번호 앞 6자리, 뒤 4자리 표시 카드번호 앞 6자리, 뒤 4자리 표시 카드 유효기간 모두 별표 표시 카드 유효기간 모두

sealove3904.tistory.com

 

 

 

 

728x90
반응형
728x90

이메일 정규식 마스킹처리 공유하며 보안관점으로는 서버에서 하는걸 추천한다.

 

[실행결과]

[소스코드]

<!DOCTYPE html>
<html>
<head>
<title>데모</title>
<style>
	.divTbl     { display: table; width: 100%; }
	.divTblRow  { display: table-row; }
	.divTblCell { display: table-cell; border: 1px solid #999999; padding: 3px 10px; }
	button   { height: 30px; line-height: 17px; margin-top: 10px; }
	textarea { height: 314px; width: 668px; position: fixed; }
</style>
<script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script>
<script>
var com = {
	utils : {}
};

com.utils = {

	/**
	* @description 이메일 마스킹하는 함수.
	* @param {string} email(ex:xxxx@abc.com)
	* @param {string} 마스킹 타입(EMAIL, ID, NAME, PHONE 기타등등)
	* @return {string} 마스킹 처리된 문자열
	*/
	makeMask: function (t, s) {
	
		var maskedValue = '';

		switch (t) {
			// 앞 2자리만 표시 처리 (ex : mi******@gmail.com)
			case 'EMAIL' :
				var len = s.toString().split('@')[0].length - 3; // 
				maskedValue = s.replace(new RegExp('.(?=.{0,' + len  + '}@)', 'gi'), '*');
			break;
		}
		
		// Log
		$('#txtLog').append('입력값 : |' + s + '| >> 출력값 : |' + maskedValue + '\n\n'); 

		return maskedValue;
  },

};
</script>
</head>
<body>
<h1>이메일 마스킹 처리</h1>
<div class="divTbl" style="height:330px;">
	<div class="divTblRow">
		<div class="divTblCell" style="width:150px;">

			<button onclick="com.utils.makeMask('EMAIL', 'sealove3904@naver.com')">
				앞 두자리만 표시처리
			</button>
			<button onclick="com.utils.makeMask('EMAIL', '1234567890@gmail.com')">
				앞 두자리만 표시처리
			</button>

		</div>
		<div class="divTblCell" style="width:500px">
			<textarea id='txtLog'></textarea>
		</div>
	</div>
<div>
</body>
</html>

 

[첨부파일]

masking.html
0.00MB

 

728x90
반응형
728x90

[소스코드]

          /**
           * @description 문자열 길이(Byte)를 구하는 함수.
           * @param {string} 문자
           * @param {string} charset (UTF-8,EUC-KR)
           * @return {string} 문자열 길이(Byte)
           */
          lengthB: function (s, charset, b, i, c) {
                
                // argv 값 Validation 은 추가 필요합니다.
                if( s == '' ){
                    b = -1;    
                }else{
                    charset = charset ? charset.toUpperCase() : 'UTF-8';
                    
                    if( charset.search(/UTF-8|EUC-KR/g) > -1 ){
                        if(charset == 'UTF-8'){
                            for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);
                        }else{
                            for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?2:1);
                        }
                    }
                }
                
                console.log('입력값 : |' + s + '| 캐릭터셋 : |' + charset + '| >> 출력값 : |' + b + '(byte)|'); 

                return b;
          },

 

[실행결과]

[첨부파일]

test.html
0.00MB

728x90
반응형
728x90

[소스코드]

          /**
           * @description 문자열에서 좌측 대체 문자열로 채워 문자열을 생성하는 함수.
           * @param {string} 문자
           * @param {string} 대체문자
           * @param {string} 자리수
           * @return {string} 문자열
           */
          sPad: function (s, r, l) {

                var result = s.padStart(l, r);

                console.log('입력값 : |' + s + '| >> 출력값 : |' + result + '|'); 

                return result;
          },
          /**
           * @description 문자열에서 우측 대체 문자열로 채워 문자열을 생성하는 함수.
           * @param {string} 문자
           * @param {string} 대체문자
           * @param {string} 자리수
           * @return {string} 문자열
           */
          ePad: function (s, r, l) {
    
                var result = s.padEnd(l, r);

                console.log('입력값 : |' + s + '| >> 출력값 : |' + result + '|'); 

                return result;
          },

 

[실행결과]

 

[첨부파일]

test.html
0.00MB

 

 

728x90
반응형

+ Recent posts