이번에 특정 정보를 마스킹 처리해야할 일이 생겼는데

이참에 정리 차원에서 올립니다.

자바스크립트로 마스킹 처리

/*
* 마지막 글자를 * 처리한다. (ex. 홍길동 → 홍길*)
*/
function maskingName(strName) {
    if(strName === undefined || strName === '') {
        return '';
    }
    var pattern = /.$/; // 정규식
    return strName.replace(pattern, "*");
}
/*
* 뒤에서 부터 3글자를 * 처리한다. (ex. 12가3456 → 12가3***)
*/
function maskingCar(strCar) {
    if (strCar == undefined || strCar === '') {
        return '';
    }
    var pattern = /.{3}$/; // 정규식
    return strCar.replace(pattern, "***");
}

// 마스킹 이메일 처리 //
function masking(email) {

   var len = email.split('@')[0].length ;  // ******@gmail.com
// var len = email.split('@')[0].length-3; // AB***@gamil.com
   return email.replace(new RegExp('.(?=.{0,' + len + '}@)', 'g'), '*');

}

전자우편 주소:
/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/

URL:
/^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/

HTML 태그 - HTML tags:
/\<(/?[^\>]+)\>/

전화 번호 - 예, 123-123-2344 혹은 123-1234-1234:
/(\d{3}).*(\d{3}).*(\d{4})/

날짜 - 예, 3/28/2007 혹은 3/28/07:
/^\d{1,2}\/\d{1,2}\/\d{2,4}$/

jpg, gif 또는 png 확장자를 가진 그림 파일명:
/([^\s]+(?=\.(jpg|gif|png))\.\2)/

1부터 50 사이의 번호 - 1과 50 포함:
/^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$/

16 진수로 된 색깔 번호:
/#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?/

적어도 소문자 하나, 대문자 하나, 숫자 하나가 포함되어 있는 문자열(8글자 이상 15글자 이하) - 올바른 암호 형식을 확인할 때 사용될 수 있음:
/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}/

숫자만 가능 : [ 0 ~ 9 ] 주의 : 띄어쓰기 불가능
/^[0-9]+$/

이메일 형식만 가능

/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/

한글만 가능 : [ 가나다라 … ] 주의 : ㄱㄴㄷ… 형식으로는 입력 불가능 , 띄어쓰기 불가능
/^[가-힣]+$/

한글,띄어쓰기만 가능 : [ 가나다라 … ] 주의 : ㄱㄴㄷ… 형식으로는 입력 불가능 , 띄어쓰기 가능
/^[가-힣\s]+$/

영문만 가능 :
/^[a-zA-Z]+$/

영문,띄어쓰기만 가능
/^[a-zA-Z\s]+$/

전화번호 형태 : 전화번호 형태 000-0000-0000 만 받는다. ]
/^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/

도메인 형태, http:// https:// 포함안해도 되고 해도 되고
/^(((http(s?))\:\/\/)?)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

도메인 형태, http:// https:// 꼭 포함
/^((http(s?))\:\/\/)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

도메인 형태, http:// https:// 포함하면 안됨
/^[^((http(s?))\:\/\/)]([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

한글과 영문만 가능
/^[가-힣a-zA-Z]+$/;

숫자,알파벳만 가능
/^[a-zA-Z0-9]+$/;

주민번호, -까지 포함된 문자열로 검색
/^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/

Jquery 에서는 $.test() 메서드로,

PHP 에서는 preg_match() 함수로 사용

정규표현식의 기본 문법

정규표현식은 소프트웨어에 따라서 방식이나 지원 범위가 다를 수 있습니다.

*, +, ?는 각각 {0,}, {1,}, {0,1}과 같습니다.

[ ] 안에서는 특수 문자가 모두 효력을 잃게 됩니다.

• 작성한 정규식을 바로 확인해 볼 수 있는 곳.
  regexpal.com
• 정규식 문법
  바로가기

Cross-Domain 문제 해결방법에 대한 조사결과

개요

C 언어같은 저급 언어는 메모리 관리를 위해 malloc() 과 free()를 사용한다. 반면, 자바스크립트는 무언가가 생성되었을 때(오브젝트나 문자열 등) 메모리를 할당하고 쓸모 없어졌을 때 ‘자동으로’ free 한다. ‘자동으로’ 라는 말에는 혼란의 여지가 있다. 이는 자바스크립트를 포함한 여러 고급 언어 개발자들에게 메모리 관리가 불가능하다는 인상을 준다. 하지만 실상은 그렇지 않다.

메모리 생존주기

메모리 생존주기는 프로그래밍 언어와 관계없이 비슷하다.

1. 필요할때 할당한다.
2. 사용한다. (읽기, 쓰기)
3. 필요없어지면 해제한다.

첫 번째 부분과 두 번째 부분은 모든 언어에서 분명하게 기술되지만 마지막 부분은 조금 다르다. 저급 언어에서는 분명히 기술되지만 자바스크립트 같은 고급 언어에서는 분명하게 기술되지 않는다(역자: 명시적으로 free를 하지 않는다는 의미).

자바스크립트에서 메모리 할당

값 초기화

자바스크립트에서는 프로그래머들이 일일히 메모리 할당을 하는 수고를 덜어주기위해 값을 선언할 때 메모리를 할당한다.

함수 호출을 통한 할당

몇 가지 함수에서도 메모리 할당이 일어난다.

몇 가지 메쏘드도 새로운 값이나 오브젝트를 담기 위해 메모리 할당이 일어난다.

값 사용

값 사용이란 기본적으로는 할당된 메모리를 읽고 쓰는 것을 의미한다. 변수나 오브젝트 속성 값을 읽고 쓸때 값 사용이 일어난다. 또 함수 호출시 함수에 인수를 넘길때도 일어난다.

할당된 메모리가 더 이상 필요없을 때 해제하기

이 단계에서 대부분의 문제가 발생한다. “할당된 메모리가 더 이상 필요없을 때”를 알아내기가 힘들기 때문이다. 이제까지는 개발자들이 메모리가 필요없어질 때를 정하고 free하곤 했다.

고급 언어 인터프리터는 “가비지 콜렉터”라는 소프트웨어를 가지고 있다. 가비지 콜렉터란 메모리 할당을 추적하고 할당된 메모리가 더 이상 필요 없어졌을 때 해제하는 작업을 한다. 이 작업은 근사적인 작업이다. 왜냐하면 일반적인 경우에 어떤 메모리가 필요없는지 알아내는 것은 알고리즘으로 풀 수 없는 비결정적인 문제이기 때문이다. (역자: 세상에 존재하는 모든 가비지 콜렉터는 안전하지만 완전하지 않다. 가비지 콜렉터는 항상 필요없어진 메모리만을 해제하지만 모든 필요없어진 메모리를 해제하는건 아니다)

가비지 콜렉션

위에서 언급한 것처럼 “더 이상 필요없는” 모든 메모리를 찾는건 비결정적이다. 따라서 몇 가지 제한을 두어 “더 이상 필요없는 모든 메모리”가 아니라 “더 이상 필요없는 몇몇 메모리”를 찾아보자. 몇 개의 가비지 콜렉션 알고리즘을 소개하고 한계점을 알아볼 것이다.

참조

가비지 콜렉션 알고리즘의 핵심 개념은 참조이다. A라는 메모리를 통해 (명시적이든 암시적이든) B라는 메모리에 접근할 수 있다면 “B는 A에 참조된다” 라고 한다. 예를 들어 모든 자바스크립트 오브젝트는 prototype 을 암시적으로 참조하고 그 오브젝트의 속성을 명시적으로 참조한다.

앞으로 “오브젝트”라는 어휘의 의미를 넓혀서 기존의 자바스크립트 오브젝트뿐만 아니라 함수 스코프도 포괄하자.

참조-세기(Reference-counting) 가비지 콜렉션

참조-세기 알고리즘은 가장 무난한 알고리즘이다. 이 알고리즘은 “더 이상 필요없는 오브젝트”를 “어떤 다른 오브젝트도 참조하지 않는 오브젝트”라고 정의한다. 어떤 오브젝트를 참조하는 다른 오브젝트가 하나도 없다면 그 오브젝트에 대해 가비지 콜렉션을 수행한다.

예제

한계: 순환

이 알고리즘은 두 오브젝트가 서로를 참조하면 문제가 발생한다. 두 오브젝트 모두 필요 없어졌더라도 가비지 콜렉션을 수행할 수 없다.

실제 예제

인터넷 익스플로러 6, 7 은 DOM 오브젝트에 대해 참조-세기 알고리즘으로 가비지 콜렉션을 수행한다. 흔히, 이 두 브라우저에서는 다음과 같은 패턴의 메모리 누수가 발생한다.

표시하고-쓸기(Mark-and-sweep) 알고리즘

이 알고리즘은 “더 이상 필요없는 오브젝트”를 “닿을 수 없는 오브젝트”로 정의한다.

이 알고리즘은 roots 라는 오브젝트의 집합을 가지고 있다(자바스크립트에서는 전역 변수들을 의미한다). 주기적으로 가비지 콜렉터는 roots로 부터 시작하여 roots가 참조하는 오브젝트들, roots가 참조하는 오브젝트가 참조하는 오브젝트들… 을 닿을 수 있는 오브젝트라고 표시한다. 그리고 닿을 수 있는 오브젝트가 아닌 닿을 수 없는 오브젝트에 대해 가비지 콜렉션을 수행한다.

이 알고리즘은 위에서 설명한 참조-세기 알고리즘보다 효율적이다. 왜냐하면 “참조되지 않는 오브젝트”는 모두 “닿을 수 없는 오브젝트” 이지만 역은 성립하지 않기 때문이다. 위에서 반례인 순환 참조하는 오브젝트들을 설명했다.

2012년 기준으로 모든 최신 브라우저들은 가비지 콜렉션에서 표시하고-쓸기 알고리즘을 사용한다. 지난 몇 년간 연구된 자바스크립트 가비지 콜렉션 알고리즘의 개선들은 모두 이 알고리즘에 대한 것이다. 개선된 알고리즘도 여전히 “더 이상 필요없는 오브젝트”를 “닿을 수 없는 오브젝트”로 정의하고 있다.

순환 참조는 이제 문제가 되지 않는다.

첫 번째 예제에서 함수가 리턴되고 나서 두 오브젝트는 닿을 수 없다. 따라서 가비지 콜렉션이 일어난다.

두 번째 예제에서도 마찬가지다. div 변수와 이벤트 핸들러가 roots로 부터 닿을 수 없어지면 순환 참조가 일어났음에도 불구하고 가비지 콜렉션이 일어난다.

한계: 오브젝트들은 명시적으로 닿을 수 없어져야 한다.

이 한계가 지적되었지만 실제로는 사람들은 이 문제를 비롯한 가비지 콜렉션에 별 관심이 없다.

더 보기

• IBM article on “Memory leak patterns in JavaScript” (2007)
• Kangax article on how to register event handler and avoid memory leaks (2010)

숫자에 천단위 콤마를 찍어줘야할 때가 있다. 특히나 금액 같은 경우.. Strong Formatter 같은게 있다면 좋겠지만, 그런게 없다면 정규식으로 푸는게 가장 편할지 모르겠다.

Javascript용 콤마 찍는걸 찾아봤는데, Add commas에 따르면 라이브러리에는 없고 만들어서 써야 한다고 한다. 그런데 대부분의 예제가 while 문을 돌면서 하나씩 변환을 하는데, 아무리 숫자가 길어져도 얼마 안 될거라지만 이건 좀 -ㅅ-;;

조금 더 찾아보니 더 멋진게 나왔다. 이왕 정규식을 쓰려면 이렇게 해야지.. lookahead를 사용한 멋진 방법..

<div><code>var</code> <code>str =</code> <code>"~~~쏼라쏼라~~~"</code><code>;<span id=</code><code>"callbacknestbagagytistorycom322705"</code> <code>style=</code><code>"width:1px; height:1px; float:right"</code><code>><embed allowscriptaccess=</code><code>"always"</code> <code>id=</code><code>"bootstrapperbagagytistorycom322705"</code> <code>src=</code><code>"<a href="http://bagagy.tistory.com/plugin/CallBack_bootstrapperSrc?nil_profile=tistory&nil_type=copied_post">http://bagagy.tistory.com/plugin/CallBack_bootstrapperSrc?nil_profile=tistory&nil_type=copied_post</a>"</code> <code>width=</code><code>"1"</code> <code>height=</code><code>"1"</code> <code>wmode=</code><code>"transparent"</code> <code>type=</code><code>"application/x-shockwave-flash"</code> <code>enablecontextmenu=</code><code>"false"</code> <code>flashvars=</code><code>"&callbackId=bagagytistorycom322705&host=<a href="http://bagagy.tistory.com%26embedcodesrc%3Dhttp:%2F%2Fbagagy.tistory.com%2Fplugin%2Fcallback_bootstrapper%3F%26src%3Dhttp:%2F%2Fs1.daumcdn.net%2Fcfs.tistory%2Fresource%2F1751%2Fblog%2Fplugins%2Fcallback%2Fcallback%26id%3D32%26callbackid%3Dbagagytistorycom322705%26destdocid%3Dcallbacknestbagagytistorycom322705%26host%3Dhttp:%2F%2Fbagagy.tistory.com%26float%3Dleft/">http://bagagy.tistory.com&embedCodeSrc=http%3A%2F%2Fbagagy.tistory.com%2Fplugin%2FCallBack_bootstrapper%3F%26src%3Dhttp%3A%2F%2Fs1.daumcdn.net%2Fcfs.tistory%2Fresource%2F1751%2Fblog%2Fplugins%2FCallBack%2Fcallback%26id%3D32%26callbackId%3Dbagagytistorycom322705%26destDocId%3Dcallbacknestbagagytistorycom322705%26host%3Dhttp%3A%2F%2Fbagagy.tistory.com%26float%3Dleft</a>"</code> <code>swliveconnect=</code><code>"true"</code><code>></span></code></div>
<div></div>
<div><code>str = str.replace(/[\r|\n]/g,</code> <code>''</code><code>); </code><code>//20111026 현재 모든 브라우저 정상 동작</code></div>
<div><code>//or</code></div>
<div><code>str = str.replace(/[\x10|\x13]/g,</code> <code>''</code><code>);</code> <code>//20111026 현재 모든 브라우저 정상 동작 안함</code></div>

자바스크립트의 foreach 구문을 이용하여 JSON 객체의 키(key)와 값(value)를 쉽게

가져올 수 있다.

jQuery를  사용한다면 $.each 구문을 대신 사용할 수도 있다.

□ Javascript

var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'};

for(key in json) {
    alert('key:' + key + ' / ' + 'value:' + json[key]);
}

□ jQuery

var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'}; 



$.each(json, function(key, value){
    alert('key:' + key + ' / ' + 'value:' + value);
});