[JS] 유용한 자바스크립트 바이트 체크 함수 ( 한글 3바이트, 엔터 2바이트, 그 외 1바이트 )_ byte check_ db맞춤형

//글자수 체크
function textByteChk(message, msgLimit, msgTarget){
	
	var limitByte = Number(msgLimit);
	var totalByte = 0;
	var messageVal = $("#"+ message).val();
	
	// 해당 아이디값이 있는 경우 실행
	if($("#"+message).length > 0) {
		messageVal = messageVal.replace(/ +/g, " "); // 연속된 공백 > 하나의 공백으로 치환
		messageVal = messageVal.replace(/　+/g, " "); // ㄱ 한자 공백 > 하나의 공백으로 치환
		$("#"+ message).val(messageVal);
		for(var i =0; i < messageVal.length; i++) {
			var ch = escape(messageVal.charAt(i));
			if(ch.length == 1) totalByte++; // 영문 (db : 1byte)
			else if(escape(messageVal.charAt(i))=='%0A') totalByte += 2; // 엔터2바이트(개행 먼저 체크) (db : 2byte)
			else if(ch.indexOf("%u") != -1) totalByte += 3; // 한글 3바이트 ( db : 3byte )
			else if(ch.indexOf("%") != -1) totalByte += ch.length/3; // 개행, 공백 ( db : 1byte)
		}
		$('#'+ msgTarget).text(totalByte);
		// 입력된 바이트 수가 limitByet를 초과 할 경우 경고창 
		if(totalByte > limitByte) {
			alert(limitByte+" 바이트까지 입력 가능합니다.");
			var bytes = 0;
			for(var j=0; j < messageVal.length; j++) {
				var ch = escape(messageVal.charAt(j));
				if(ch.length == 1) bytes++; // 영문  (db : 1byte)
			else if(escape(messageVal.charAt(j))=='%0A') bytes += 2; // 엔터 2바이트(개행 먼저 체크) (db : 2byte)
			else if(ch.indexOf("%u") != -1) bytes += 3; // 한글 3바이트 ( db : 3byte )
			else if(ch.indexOf("%") != -1) bytes += ch.length/3; // 개행, 공백 ( db : 1byte)
			if(bytes > limitByte){
				$("#"+ message).val(messageVal.substring(0,j));
				break;
			}
			$('#'+ msgTarget).text(bytes);
			}
		}
	}
}

 

 

 

  >>> 코드해석 <<<    

//글자수 체크
function textByteChk(message, msgLimit, msgTarget){

message는 일반적으로 textarea에 사용자가 입력한 value값을 의미한다.

msgLimit는 해당 textarea에 제한하고 싶은 바이트 수를 의미한다.

msgTarget은 사용자가 입력할 때마다 몇 바이트인지 체크할 수 있도록 도와준다.

var limitByte = Number(msgLimit); // 문자 > 숫자화
var totalByte = 0;
var messageVal = $("#"+ message).val(); // 사용자가 입력한 value값을 변수에 담아준다.

// 해당 아이디값이 있는 경우 실행
if($("#"+message).length > 0) { // 아이디값이 없는 경우 undefined에러가 뜨기때문에 분기처리..!

messageVal = messageVal.replace(/ +/g, " "); // 연속된 공백 > 하나의 공백으로 치환
messageVal = messageVal.replace(/　+/g, " "); // ㄱ 한자 공백 > 하나의 공백으로 치환

>> 사용자가 가끔 바이트 수 채우려고 꼼수를 쓰기때문에 연속적인 공백에 대해서 하나의 공백으로 치환해준다.

$("#"+ message).val(messageVal);

>> 연속된 공백이 하나의 공백으로 치환된 textarea value값을 다시 지정해줌

(즉, 처음에는 연속된 공백이 있었다면 이제는 연속적 공백이 존재하지 않는 값임)

for(var i =0; i < messageVal.length; i++) { // textarea의 value의 길이만큼 for문을 돌면서 바이트 체크 시작
var ch = escape(messageVal.charAt(i)); // charAt은 해당 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환함
if(ch.length == 1) totalByte++; // 영문 (db : 1byte)
else if(escape(messageVal.charAt(i))=='%0A') totalByte += 2; // 엔터2바이트(개행 먼저 체크) (db : 2byte)

%0A가 엔터를 의미하는 듯 함.. 엔터를 먼저 체크해주어야 하는데

그 이유는 추후 개행과 공백은 같이 체크해주는 조건이 있기때문에 먼저 체크함으로써 개행이 1바이트로 체크되는 걸 막아주는 느낌

else if(ch.indexOf("%u") != -1) totalByte += 3; // 한글 3바이트 ( db : 3byte )
else if(ch.indexOf("%") != -1) totalByte += ch.length/3; // 개행, 공백 ( db : 1byte)
}

$('#'+ msgTarget).text(totalByte); // 사용자가 입력함에 따라 실시간으로 변하는 바이트 값은 표현해주는 코드

// 입력된 바이트 수가 limitByet를 초과 할 경우 경고창 
if(totalByte > limitByte) {
alert(limitByte+" 바이트까지 입력 가능합니다.");
var bytes = 0;
for(var j=0; j < messageVal.length; j++) {
var ch = escape(messageVal.charAt(j));
if(ch.length == 1) bytes++; // 영문  (db : 1byte)
else if(escape(messageVal.charAt(j))=='%0A') bytes += 2; // 엔터 2바이트(개행 먼저 체크) (db : 2byte)
else if(ch.indexOf("%u") != -1) bytes += 3; // 한글 3바이트 ( db : 3byte )
else if(ch.indexOf("%") != -1) bytes += ch.length/3; // 개행, 공백 ( db : 1byte)

if(bytes > limitByte){
$("#"+ message).val(messageVal.substring(0,j));

// 제한해두었던 바이트 범위를 넘어가는 경우 그 이하까지만 textarea의 value값을 잘라주는 역할

예를 들어 4000바이트 제한인데 4003바이트를 입력한다면 4000바이트까지 잘라주고 해당하는 3바이트에 해당하는 문자열은 잘라져서 삭제되는 느낌

break;
}
$('#'+ msgTarget).text(bytes);
}
}
}
}