한글 포함 문자열 길이 구하기

발생일: 2009.06.24

문제:
option에 포함된 text 길이에 따라 동적으로 가로 사이즈가 늘어나는 select box가 있다.
사이즈는 대략 맞으면 되었기 때문에 내부적으로는 font size(대충 11 정도)에 text 길이를 곱한 값으로
select box의 스타일을 설정하는 로직이 있었다.
이제까지는 text에 영어만 있었기 때문에 별 탈 없이 운영되고 있었는데,
이번에 한글이 포함되면서 select box의 가로 사이즈가 정상적으로 늘어나지 않는다.
한글이 2byte 임에도 length를 구하면 1byte로 표시되기 때문이다.

한글을 포함한 문자열의 길이를 구할 수 있을까?

해결책:
검색해보니 한글 포함 문자열의 길이를 구하는 로직에 대해 정리해둔 블로그가 있다.
텍스트 내 캐릭터를 escape() 함수를 이용해 인코딩하여
그 값의 길이가 6일 경우 한글로 판단하여 2byte로 계산해주는 로직이다. (예: escape('가') --> %uAC00)

아래는 좀더 깔끔히 정리한 소스~

/**
 * 한글포함 문자열 길이를 구한다
 */
function getTextLength(str) {
    var len = 0;
    for (var i = 0; i < str.length; i++) {
        if (escape(str.charAt(i)).length == 6) {
            len++;
        }
        len++;
    }
    return len;
}