본문 바로가기

JS, CSS, HTML

[불편 -1] 문자열 자르기: Byte 단위

문자열을 자를 때, 무심코 음절 갯수로 subString으로 자르게 되면

한글 + 영문 혼용의 상황에서, 굉장히 불편한 상황을 마주할 수 있다.

 

같은 여섯글자일 때, 한글과 영어가 각각

여섯글자입니다

abcde

로 보이는 현상을 마주할 수 있다. 

 

본인은 정해진 넓이의 칸에 글자가 넘치면 자르는 함수를 만드려고 했는데,

글자가 아니라 byte 단위로 잘라야 편안한 UI를 볼 수 있다.

(초보 개발자지만 이런 디테일에 신경쓰는 저, 비정상인가요?)

 

자르는 방법은 아래와 같다.

 

    var textEllipsis = function(data, offset){ //data: 자르고자 하는 str, offset: 자르는 byte 길이
        dataByteLength = (function(s,b,i,c){ //data의 길이를 byte로 변환한다
            for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);
            return b;
        })(data);

        if(dataByteLength > offset){
            for(b=i=0;c=data.charCodeAt(i);) {
                b+=c>>7?2:1;
                if(b > offset) break;
                i++;
            }
            return data.substring(0,i)+'…';
        }else{
            return data;
        }
    }

 

 

[참고 블로그]

https://programmingsummaries.tistory.com/239

https://zionh.tistory.com/68