[JavaScript] 마스킹 처리하기

프론트 작업을 하다 보면 어쩔 수 없이 개인정보에 마스킹 처리를 해줘야 할 때가 있다.

 

깊지는 않아도 간단하게 그대로 가져다 쓰면 괜찮은 마스킹 처리에 대해서 알아보자

 

1. 이메일 마스킹

1.1 이메일 앞부분만 마스킹

 

<script type="text/javascript">
$(function() {
	var email_front = $("#email_front").text();
	
	var length = email_front.toString().split("@")[0].length - 3;
	
	var email_front_masking = email_front.toString().replace(new RegExp('.(?=.{0,' + length + '}@)', 'g'), '*');
	
	$("#email_front_masking").text(email_front_masking);
});
</script>
<p id="email_front">abcdefg123456@sample.com</p>
<p id="email_front_masking"></p>

 

 

1.2 이메일 뒷부분 까지 마스킹 처리

 

<script type="text/javascript">
$(function() {
	var email_front = $("#email_back").text();
	
	var length = email_front.toString().split("@")[0].length - 3;
	
	var email_front_masking = email_front.toString().replace(new RegExp('.(?=.{0,' + length + '}@)', 'g'), '*').replace(/.{6}$/, "******");
	
	$("#email_back_masking").text(email_front_masking);
});
</script>
<p id="email_back">abcdefg123456@sample.com</p>
<p id="email_back_masking"></p>

 

 

2. 전화번호 마스킹

2.1 '-' 없는 전화번호

 

<script type="text/javascript">
$(function() {
	var phone = $("#phone").text();
	
	var phoneStr = phone.match(/\d{11}/gi);
	
	var phone_masking = phone.toString().replace(phoneStr, phoneStr.toString().replace(/(\d{3})(\d{4})(\d{4})/gi,'$1****$3'));

	$("#phone_masking").text(phone_masking);
});
</script>
<p id="phone">01012345678</p>
<p id="phone_masking"></p>

 

 

 

2.2 '-' 있는 전화번호

 

<script type="text/javascript">
$(function() {
	var phone = $("#phone").text();
	
	var phoneStr = phone.match(/\d{2,3}-\d{3,4}-\d{4}/gi);

	var phone_masking = phone.toString().replace(phoneStr, phoneStr.toString().replace(/-[0-9]{4}-/g, "-****-"));

	$("#phone_masking").text(phone_masking);
});
</script>
<p id="phone">010-1234-5678</p>
<p id="phone_masking"></p>

 

 

3. 주민번호 마스킹

3.1 '-' 있는 주민번호

 

<script type="text/javascript">
$(function() {
	var RRN = $("#RRN").text();
	
	var rrnStr = RRN.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);

	var RRN_masking = RRN.toString().replace(rrnStr,rrnStr.toString().replace(/(-?)([1-4]{1})([0-9]{6})\b/gi,"$1$2******"));

	$("#RRN_masking").text(RRN_masking);
});
</script>
<p id="RRN">950227-1234567</p>
<p id="RRN_masking"></p>

 

3.2 '-' 없는 주민번호

 

<script type="text/javascript">
$(function() {
	var RRN = $("#RRN").text();
	
	var rrnStr = RRN.match(/\d{13}/gi);

	var RRN_masking = RRN.toString().replace(rrnStr,rrnStr.toString().replace(/([0-9]{6})$/gi,"******"));

	$("#RRN_masking").text(RRN_masking);
});
</script>
<p id="RRN">9502271234567</p>
<p id="RRN_masking"></p>

 

 

 

4 이름 마스킹

<script type="text/javascript">
$(function() {
	var name = $("#name").text();
	
	var name_masking = name.replace(/(?<=.{1})./gi, "*");

	$("#name_masking").text(name_masking);
});
</script>
<p id="name">홍길동</p>
<p id="name_masking"></p>