JavaScript에서 긴 문자열을 일정한 크기(n 크기)의 하위 문자열로 나누어야 하는 경우는 생각보다 자주 발생합니다. 예를 들어 데이터를 페이지 단위로 표시하거나, API 요청 시 문자열 길이를 제한해야 할 때 유용합니다. 이를 구현하는 대표적인 방법은 두 가지가 있습니다.
1) 일반적인 방법 (Conventional Method)
이 방법은 for 루프, concat(), 나머지 연산자(%) 등 기본적인 문법만으로 순수하게 로직을 구성하는 방식입니다. 다만 정규식 방법에 비해 유연성이 떨어지는데, 그 이유는 코드를 작성하기 전에 몇 개의 청크로 나눌지 미리 정해져 있어야 하기 때문입니다.
아래 예제에서는 문자열 "tutorixtutorixtutorix"를 3글자씩 잘라서 여러 개의 하위 문자열로 분할합니다.
예제 코드
<html>
<body>
<script>
var v = [];
var str = "tutorixtutorixtutorix";
var t = str.split("");
document.write(t);
document.write("</br>");
for (var i = 0; i < t.length; i++) {
if ((i % 3) == 2) {
v.push(t[i-2].concat(t[i-1], t[i]));
}
}
document.write(v);
</script>
</body>
</html>
출력 결과
tut,ori,xtu,tor,ixt,uto,rix
문자열을 한 글자씩 배열로 만든 뒤, 인덱스를 3으로 나눈 나머지가 2일 때마다 세 글자를 하나로 합쳐 새 배열에 추가하는 방식입니다.
2) 정규식(Regex) 방법
정규식 방법은 청크 개수를 미리 정할 필요가 없다는 점에서 훨씬 유연합니다. 원하는 청크 크기를 코드에 직접 지정할 수 있어 재사용성도 뛰어납니다.
일반적으로 임의의 문자열에서 최대 n 크기의 하위 문자열을 추출하려면 다음과 같은 문법을 사용합니다.
str.match(/.{1,n}/g); // n을 원하는 청크 크기로 바꿔서 사용
만약 문자열에 줄바꿈(newline)이나 캐리지 리턴(carriage return)이 포함되어 있다면 다음 문법을 사용해야 합니다.
str.match(/(.|[\r\n]){1,n}/g); // n을 원하는 청크 크기로 바꿔서 사용
이 문법을 함수 형태로 일반화하면 다음과 같습니다.
function chunkString(str, size) {
return str.match(new RegExp('.{1,' + size + '}', 'g'));
}
예제 코드
<html>
<body>
<script>
stringChop = function(str, size) {
if (str == null)
return [];
str = String(str);
return size > 0 ? str.match(new RegExp('.{1,' + size + '}', 'g')) : [str];
}
document.write(stringChop('tutorialspoint'));
document.write("<br>");
document.write(stringChop('tutorix', 2));
document.write("<br>");
document.write(stringChop('tutorialspoint', 3));
</script>
</body>
</html>
출력 결과
["tutorialspoint"] ["tu","to","ri","x"] ["tut","ori","als","poi","nt"]
위 예제에서 확인할 수 있듯이, 크기를 지정하지 않으면 문자열 전체가 하나의 배열 요소로 반환되고, 크기를 지정하면 해당 크기만큼 잘린 하위 문자열 배열이 반환됩니다. 마지막 청크는 남은 글자 수에 관계없이 그대로 포함됩니다.
마무리
간단하고 고정된 로직이 필요하다면 일반적인 방법도 충분하지만, 실무에서는 크기를 동적으로 지정할 수 있는 정규식 방법이 더 간결하고 유연하기 때문에 널리 사용됩니다. 상황에 맞는 방법을 선택해 활용해 보시기 바랍니다.