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

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

[자바스크립트] 카드 유효기간 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 카드번호 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 문자열 길이(Byte) 구하는 함수  (0) 2022.10.05
[자바스크립트] 좌우 특정문자 채우기  (0) 2022.10.05
[자바스크립트] 문자열 공백제거하는 함수  (0) 2022.10.05
728x90

샘플화면을 만들면서 HTML, CSS 를 좀 만지다보니 괜찮은 사이트인거 같아 공유한다.

사이트가 넘 복잡한거 같기도하고...

참고로 난 위 사진처럼 테이블을 Div 태그로 생성하여 사용하고 싶었고 CSS 를 어떻게 사용해야지를 알고 싶었다.

 

https://divtable.com/converter/

 

HTML Table to Div Converter

Transform traditional HTML Tables to Div Tables. Copy and convert any visual table document to Div tables with a simple click of a button

divtable.com

 

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

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

[자바스크립트] 카드번호 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 이메일 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 좌우 특정문자 채우기  (0) 2022.10.05
[자바스크립트] 문자열 공백제거하는 함수  (0) 2022.10.05
[자바스크립트] 유일한 ID 생성하는 함수  (1) 2022.10.05
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
반응형

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

[자바스크립트] 이메일 마스킹 처리하기  (0) 2022.10.07
[자바스크립트] 문자열 길이(Byte) 구하는 함수  (0) 2022.10.05
[자바스크립트] 문자열 공백제거하는 함수  (0) 2022.10.05
[자바스크립트] 유일한 ID 생성하는 함수  (1) 2022.10.05
[자바스크립트] 숫자를 한글로 변환하기 (금액단위)  (1) 2022.10.04
728x90

[소스코드]

          /**
           * @description 좌측공백을 제거한다.
           * @param {string} 문자열
           * @return {string} 좌측 공백이 제거된 문자열
           */
          trimL: function (s) {

                var result = s.replace(/^[ ]*/g, '');

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

                return result;

          },
          /**
           * @description 우측공백을 제거한다.
           * @param {string} 문자열
           * @return {string} 우측 공백이 제거된 문자열
           */
          trimR: function (s) {
    
                var result = s.replace(/[ ]*$/g, '');

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

                return result;

          },
          /**
           * @description 공백을 제거한다.
           * @param {string} 문자열
           * @return {string} 공백이 제거된 문자열
           */
          trim: function (s) {

                var result = s.trim();

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

                return result;

          },

 

[실행결과]

 

[첨부파일]

test.html
0.00MB

728x90
반응형

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

[자바스크립트] 문자열 길이(Byte) 구하는 함수  (0) 2022.10.05
[자바스크립트] 좌우 특정문자 채우기  (0) 2022.10.05
[자바스크립트] 유일한 ID 생성하는 함수  (1) 2022.10.05
[자바스크립트] 숫자를 한글로 변환하기 (금액단위)  (1) 2022.10.04
[자바스크립트] 숫자를 거리단위로 변환해주는 함수  (0) 2022.09.29
728x90

[소스코드]

          /**
           * @description 유일한 ID를 반환한다.
           * @param {string} ID 앞에 붙여지는 문자열
           * @param {string} ID 생성시 구분되는 문자열
           * @return {string} 유일한 ID
           */
          uuid: function (prefix, separator) {

                var result = '';

                if(!separator) separator = '-';

                prefix = (!prefix) ? '' : prefix + separator;

                var char = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
                var u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);

                var argv1 = u.substr(0,8);
                var argv2 = u.substr(8,4);
                var argv3 = '';
                
                for( var i=0; i<4; i++ ){
                        argv3 += char[Math.random() * 16  | 0];
                }
                
                var argv4 = char[Math.random() * 16  | 0] + u.substr(13,3);
                var argv5 = u.substr(16,12);
                
                var guid = [argv1, argv2, argv3, argv4, argv5].join(separator);
                
                result = prefix + guid;
     
                console.log(' >> 출력값 : ' + result);
     
                return result;
              
          },

 

[실행결과]

 

[첨부파일]

test.html
0.00MB

728x90
반응형

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

[자바스크립트] 좌우 특정문자 채우기  (0) 2022.10.05
[자바스크립트] 문자열 공백제거하는 함수  (0) 2022.10.05
[자바스크립트] 숫자를 한글로 변환하기 (금액단위)  (1) 2022.10.04
[자바스크립트] 숫자를 거리단위로 변환해주는 함수  (0) 2022.09.29
[자바스크립트] 숫자를 콤마로 구분(1000단위)하는 함수  (2) 2022.09.29
728x90

[소스코드]

    /**
     * @description 숫자를 한글(금액단위)로 변환한다.
     * @param {number} 숫자, 금액(정수)
     * @return {string} 한글(금액단위) 문자열
     */
    numToKor: function (sNum) {

                if( typeof(sNum) === 'number' ){
                        sNum = sNum.toString();
                }
                                        
                var result       = '';
                var bUnitWords   = ['', '만', '억', '조', '경'];
                var sUnitWords   = ['천', '백', '십', '']
                var numKor       = ['영', '일', '이', '삼', '사', '오', '육', '칠', '팔', '구'];
                var unitPow      = 10000;
                var convNumArray = [];

                for (var i = 0; i < bUnitWords.length; i++){

                    var bUnitValue = (sNum % Math.pow(unitPow, i + 1)) / Math.pow(unitPow, i);
                        bUnitValue = Math.floor(bUnitValue);
                        
                    if (bUnitValue > 0){
                        bUnitValue = bUnitValue.toString();
                        bUnitValue = bUnitValue.padStart(4, '0');

                        var convBigUintValue = '';
                                    
                        for(var j=0; j<bUnitValue.length; j++){

                                var cutNum = bUnitValue.charAt(j);

                                if(cutNum > 0){
                                        convBigUintValue += numKor[cutNum] + sUnitWords[j];
                                }
                        }

                        convNumArray[i] = convBigUintValue;

                    }
                }

                for (var i = 0; i < convNumArray.length; i++){
                        if(!convNumArray[i]) continue;
                        result = convNumArray[i] + bUnitWords[i] + result;
                }

                console.log('입력값 : ' + sNum + ', 출력값 : ' + result);

                return result;
        
    },

 

[실행결과]

[첨부파일]

test.html
0.00MB

 

728x90
반응형

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

[자바스크립트] 문자열 공백제거하는 함수  (0) 2022.10.05
[자바스크립트] 유일한 ID 생성하는 함수  (1) 2022.10.05
[자바스크립트] 숫자를 거리단위로 변환해주는 함수  (0) 2022.09.29
[자바스크립트] 숫자를 콤마로 구분(1000단위)하는 함수  (2) 2022.09.29
[자바스크립트] 초단위 문자열을 시분초로 변환하는 함수  (2) 2022.09.29
728x90

[소스코드]

    /**
     * @description 숫자를 거리단위로 변환해준다.
     * @param {number} length 길이
     * @return 길이 문자열
     */
    distance: function (length) {

        var result = '';
        
        if (parseInt(length) > 1000) {
            result = (Math.round(length / 1000 * 100) / 100) + '' + 'km';
        } else {
            result = (Math.round(length * 100) / 100) + '' + 'm';
        }
        
        console.log('입력값 : ' + length + ', 출력값 : ' + result);
        
        return result;
    },

 

[실행결과]

[첨부파일]

distance2.html
0.00MB

 

728x90
반응형

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

[자바스크립트] 문자열 공백제거하는 함수  (0) 2022.10.05
[자바스크립트] 유일한 ID 생성하는 함수  (1) 2022.10.05
[자바스크립트] 숫자를 한글로 변환하기 (금액단위)  (1) 2022.10.04
[자바스크립트] 숫자를 콤마로 구분(1000단위)하는 함수  (2) 2022.09.29
[자바스크립트] 초단위 문자열을 시분초로 변환하는 함수  (2) 2022.09.29
728x90

[소스코드]

    /**
     * @description 숫자를 1000 단위로 콤마로 구분한다.
     * @param {number} value 값
     * @return {string} 1000 단위 comma(,) 로 구분된 문자열
     */
    currency: function ( s ) {
        var result = '';
        
        if (s) {

            // 타입 체크
            if (typeof s == 'number') {
                result = s.toString();
            } else {
                result = s;
            }
            
            // 3자리마다 ',' 표시
            result = result.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        } else {
            result = s;
        }
        
        console.log('입력값 : ' + s + ', 출력값 : ' + result);
        
        return result;
    }

 

 

[실행결과]

[첨부파일]

number.html
0.00MB

728x90
반응형

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

[자바스크립트] 문자열 공백제거하는 함수  (0) 2022.10.05
[자바스크립트] 유일한 ID 생성하는 함수  (1) 2022.10.05
[자바스크립트] 숫자를 한글로 변환하기 (금액단위)  (1) 2022.10.04
[자바스크립트] 숫자를 거리단위로 변환해주는 함수  (0) 2022.09.29
[자바스크립트] 초단위 문자열을 시분초로 변환하는 함수  (2) 2022.09.29

+ Recent posts

티스토리툴바