[Javascript] 유니코드로 문자열 byte 자르기

게시판에서 입력받은 글의 byte 수를 노출시킬 때, length 함수를 사용하여 byte 수를 계산하는 경우가 있습니다.

영문일 경우에는 상관이 없지만, 한글인 경우는 한 글자가 1byte로 계산되어(한글은 한 글자에 2byte) 글자 수가 일치하지 않습니다.

아래의 getByte()처럼 charCodeAt(i) 함수를 사용하여 i번째 문자의 유니코드를 비교해줍니다.

* 유니코드란?
전 세계의 모든 문자를 다루도록 설계된 표준 문자 전산 처리 방식

function getByte(str) {
    var l = 0;
    for (var i=0; i<str.length; i++) {
        l += (str.charCodeAt(i) > 128) ? 2 : 1;
    }
    return l;
}

입력받은 str의 length 만큼 반복하여 유니코드를 비교해 byte 수를 합산합니다.

---

getByte()로 화면에 '60/1000byte' 형식처럼 표기하고 싶다면 keyup 이벤트를 활용하여 미리 설정해둔 maxBytes 보다 클 때마다 알림 메시지를 노출시킬 수 있습니다. (keypress 이벤트는 한글 지원하지 않습니다.)

function displayBytes(){
    var maxBytes = '1000';
    var text = document.getElementById('text');
    var textLen = getByte(text.value);
		
    if(textLen > maxBytes) {
        alert("한/영 띄어쓰기 포함 1,000byte까지 입력 가능 합니다.");
        text.value = textRightDel(text.value, maxBytes);
        textLen = getByte(text.value);
    }
    document.getElementById('bytes').innerHTML = textLen + ' / ' + maxBytes + 'byte';
}

1,000byte 이상 입력되었을 경우에는 textRightDel()을 이용하여 1001번째 문자부터 삭제할 수 있습니다.

function textRightDel(str, maxByte) {
    for(b = i = 0; c = str.charCodeAt(i);) {
        b += c >> 7 ? 2 : 1;
        if(b > maxByte){
            break;
        }
        i++;
    }
    return str.substring(0,i);
}

textRightDel('테스트', '2');

위와 같이 함수를 실행했을 경우 결과는 '테'가 됩니다.