JavaScript로 문자열 줄 바꿈 처리하기: 지정된 글자 수 이후 공백에서 개행 문자 삽입하는 방법

문자열을 일정 길이 기준으로 나누어야 하는 상황은 실무에서 자주 발생합니다. 예를 들어 콘솔 출력을 정렬하거나, 고정 폭 레이아웃에 텍스트를 맞춰야 할 때가 그렇습니다. 이번 글에서는 두 개의 인자를 받는 breakString() 함수를 작성해 보겠습니다.

함수의 요구 사항

첫 번째 인자는 분할할 문자열이고, 두 번째 인자는 임계값(threshold)입니다. 문자열을 순회하다가 임계값 이상의 글자 수가 경과한 상태에서 공백을 만나면, 해당 공백을 줄 바꿈 문자('\n')로 대체하는 것이 핵심 로직입니다.

사용 예시

예를 들어 다음 코드는 줄 바꿈 없이 4글자가 지났을 때 가장 가까운 공백에서 개행을 삽입합니다.

const text = 'Hey can I call you by your name?';
console.log(breakString(text, 4));

기대되는 출력 결과는 다음과 같습니다.

Hey can
I call
you by
your
name?

구현 접근 방식

구현 전략은 간단합니다. for 반복문으로 문자열을 한 글자씩 순회하면서, 마지막 개행 이후 경과한 글자 수를 세는 카운터 변수를 유지합니다.

카운트가 임계값 이상이고 현재 문자가 공백이라면 → 새 문자열에 줄 바꿈 문자를 추가하고 카운트를 0으로 초기화합니다.
그렇지 않다면 → 원본 문자열의 문자를 그대로 새 문자열에 추가하고 카운트를 1 증가시킵니다.

이 방식은 단어 중간을 잘라내지 않고 항상 공백 위치에서만 줄을 나누기 때문에, 단어의 가독성이 유지된다는 장점이 있습니다.

전체 코드

const text = 'Hey can I call you by your name?';
const breakString = (str, limit) => {
    let brokenString = '';
    for(let i = 0, count = 0; i < str.length; i++){
        if(count >= limit && str[i] === ' '){
            count = 0;
            brokenString += '\n';
        }else{
            count++;
            brokenString += str[i];
        }
    }
    return brokenString;
}
console.log(breakString(text, 4));

실행 결과

콘솔 출력 결과는 다음과 같습니다.

Hey can
I call
you by
your
name?

마치며

이 함수는 시간 복잡도 O(n)으로 문자열 길이에 비례하여 선형적으로 동작하므로 성능 면에서도 효율적입니다. 필요에 따라 임계값을 조정하거나, 공백 대신 하이픈 등 다른 구분 문자를 처리하도록 확장할 수도 있습니다. 텍스트 포맷팅, 로그 정리, UI 레이아웃 조정 등 다양한 곳에서 활용해 보시기 바랍니다.