[Javascript] 자바스크립트(JS) - 문자열 Byte 체크하기

 

HTML의 input text의 Value값의 maxlength 속성을 이용하여 입력받을 데이터의 최대 크기 및 최소 크기를 설정이 가능합니다. 하지만 maxlength 속성은 한글과 영문, 숫자, 특수문자 등을 고려하지 않고 있습니다. 단순하게 문자열의 Length으로 입력을 제한하고 있는 경우가 많습니다. 따라서 이때에는 입력받는 데이터의 length 보다는 Byte를 체크하고 있습니다. 특히 input Text가 아닌 textarea 경우에는 maxlength를 체크하기 어렵습니다.

 

인코딩에 따라서 한글, 영문, 숫자, 특수문자 등 모두가 Byte가 다르게 설정됩니다. 보통 한글은 2~3 Btye이기 때문입니다.

 

웹사이트를 서핑하는 도중에 Byte 길이를 체크하는 여러 방법을 찾았습니다.

 

//FOR문으로 문자열 Byte 계산

let byteString = "문자열 Byte 체크하기";
let byteLength = 0;

for(let i=0; i<byteString.length; i++){
	if(escape(byteString.charAt(i)).length >==4){
    	byteLength += 3;
    }else if(escape(byteString.charAt(i)) === "%A7"{
    	byteLength += 3;
   	}else{
    	if(escape(byteString.charAt(i)).length !=="%0D"){
        	byteLength++;
        }
    }
}
console.log(byteLength +" Bytes");

//정규식으로 Byte계산
byteLength = byteString.replace(/[\0-\x7f]:([0-\u07ff]:(.))/g,"$&$1$2").length;
console.log(byteLength +" Bytes");

//속도개선 문자열 Byte 계산
byteLength = (function(s, b,i,c){
	for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);
    return b
})(byteString);
console.log(byteLength +" Bytes");