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
반응형

'UI > JavaScript(자바스크립트)' 카테고리의 다른 글

[자바스크립트] 차량번호 마스킹 처리하기  (0) 2022.10.11
[자바스크립트] 은행별 계좌번호 마스킹 처리  (0) 2022.10.11
[자바스크립트] 카드 유효기간 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 카드번호 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 이메일 마스킹 처리하기  (0) 2022.10.07
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
반응형

'UI > JavaScript(자바스크립트)' 카테고리의 다른 글

[자바스크립트] 은행별 계좌번호 마스킹 처리  (0) 2022.10.11
[자바스크립트] 주민등록번호 마스킹 처리하기  (0) 2022.10.11
[자바스크립트] 카드번호 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 이메일 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 문자열 길이(Byte) 구하는 함수  (0) 2022.10.05

+ Recent posts

티스토리툴바