[javascript] 문자열 Byte단위로 자르기

1. 배경

 

어플리케이션의 ui를 고도화 하다보면 거쳐야 하는 자잘한 관문들이 굉장히 많다.

그 중 하나가 바로

텍스트의 줄바꿈이다.

ui에서 제한된 텍스트 상자 안에 임의의 길이의 텍스트가 들어가기 때문에

적절한 크기로 줄바꿈을 해주지 않으면

보기에 상당히 불-편해 보일 수 있다.

 

개행(줄바꿈)도 단순히 음절의 개수(subString)으로 자르면 안된다.

영어와 한글은 낱말 하나의 Byte크기가 다르기 때문에

같은 개수의 subString으로 자를 시

영어는 같은 낱말갯수의 한글 길이의 반 정도 되는 위치에서 줄바꿈이 되는 현상을 초래한다.

 

결국 낱말의 개수가 아닌

Byte의 크기를 단위로 잘라야 하는 것이다.

 

---

 

2. 문제

 

그렇다면 한 string값을 특정 Byte 크기만큼에서 자르려면 어떻게 해야할까

 

---

 

3. 해결

function sliceByByte(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);
    
 }

 

str: 자르고 싶은 string값,
maxByte : 자르고 싶은 byte크기

를 각각 넣으면 

 

한 string값에서 원하는 크기의 byte만큼 자르고 컨트롤할 수 있다.