JavaScript / split()으로 문자열을 배열로 나누기

String.split(separator, limit)은 문자열을 구분자에서 나누어 배열을 만듭니다. 쉼표로 나눈다면 "abc,def,ghi".split(",")의 결과는 ["abc", "def", "ghi"]입니다. 원본 문자열은 바뀌지 않으며, 선택 인수 limit는 결과 배열에 담을 최대 항목 수입니다.

구분자를 지정하면 그 위치마다 나눕니다

문자열 구분자는 결과에 포함되지 않습니다. 구분자가 여러 글자라면 해당 글자들이 연속해서 나타나는 위치에서 나눕니다. 구분자가 없으면 전체 문자열이 요소 하나로 들어갑니다.

const text = 'abc,def,ghi';
console.log(text.split(','));   // ['abc', 'def', 'ghi']
console.log(text.split('def')); // ['abc,', ',ghi']
console.log(text.split('|'));   // ['abc,def,ghi']
console.log(text);               // 원본 그대로

구분자를 아예 생략하면 문자열 전체를 담은 한 요소 배열이 나옵니다. 이는 빈 문자열 ""을 구분자로 넘기는 것과 다릅니다. 자세한 인수와 반환 규칙은 MDN의 String.split() 문서에서 확인할 수 있습니다.

limit는 자르는 횟수가 아니라 결과 항목 수입니다

limit에 2를 주면 앞의 두 항목만 결과에 담고 나머지 문자열은 버립니다. limit이 0이면 빈 배열입니다. 항목 수를 제한한다고 남은 부분이 마지막 항목에 합쳐지는 것은 아닙니다.

console.log('abc,def,ghi'.split(',', 2)); // ['abc', 'def']
console.log('abc,def,ghi'.split(',', 0)); // []
console.log('abc,def,ghi'.split());       // ['abc,def,ghi']

구분자가 문장의 시작·끝에 있거나 연속해서 나타나면 빈 문자열 요소가 만들어집니다. 빈 칸을 제거하려면 먼저 결과를 확인한 뒤 filter(part => part !== "")처럼 명시적으로 처리하세요. 각 항목의 앞뒤 공백을 지우려면 map(part => part.trim())을 사용할 수 있습니다.

전체 예제: 구분자와 최대 항목 수 바꾸기

아래 코드를 UTF-8로 split-example.html에 저장하고 브라우저에서 엽니다. 원본, 구분자, 최대 항목 수를 입력하고 ‘분할’을 누르면 결과 배열과 항목 수가 나옵니다. 결과는 textContent에 넣으므로 입력된 HTML처럼 보이는 문구가 태그로 실행되지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문자열 분할 실습</title>
</head>
<body>
<label for="source">원본 문자열</label>
<input id="source" type="text" value="abc,def,ghi">
<label for="separator">구분자</label>
<input id="separator" type="text" value=",">
<label for="limit">최대 항목 수(비우면 전체)</label>
<input id="limit" type="number" min="0" step="1">
<button id="run" type="button">분할</button>
<button id="reset" type="button">처음으로</button>
<pre id="output" aria-live="polite"></pre>
<script>
const source = document.querySelector('#source');
const separator = document.querySelector('#separator');
const limit = document.querySelector('#limit');
const output = document.querySelector('#output');

function show() {
  const limitText = limit.value.trim();
  const n = Number(limitText);
  if (limitText !== '' && (!Number.isInteger(n) || n < 0)) {
    output.textContent = '최대 항목 수는 0 이상의 정수를 입력하세요.';
    return;
  }
  const parts = limitText === ''
    ? source.value.split(separator.value)
    : source.value.split(separator.value, n);
  output.textContent = `결과: ${JSON.stringify(parts)}\n항목 수: ${parts.length}`;
}

document.querySelector('#run').addEventListener('click', show);
document.querySelector('#reset').addEventListener('click', () => {
  source.value = 'abc,def,ghi';
  separator.value = ',';
  limit.value = '';
  show();
});
show();
</script>
</body>
</html>

기본 입력은 ["abc","def","ghi"]입니다. 최대 항목 수를 2로 정하면 ["abc","def"], 0으로 정하면 빈 배열이 됩니다. 구분자를 ;로 바꾸면 원본에 세미콜론이 없으므로 전체 문자열이 한 요소로 남습니다. ‘처음으로’를 누르면 세 입력과 결과가 복원됩니다.

빈 구분자·정규표현식·CSV에서 주의할 점

구분자를 빈 문자열로 지정하면 자바스크립트 문자열의 UTF-16 코드 단위로 나눕니다. 이모지처럼 두 코드 단위로 이루어진 문자가 깨질 수 있으므로 사람이 보는 문자 단위로 나누려는 용도에는 그대로 사용하지 마세요. 단순한 유니코드 코드 포인트 배열이 목적이라면 Array.from(text)를 검토하고, 결합 문자까지 한 글자로 다뤄야 한다면 Intl.Segmenter 같은 방법을 선택해야 합니다.

console.log('a,,b,'.split(','));       // ['a', '', 'b', '']
console.log('a, b; c'.split(/[,;]\s*/)); // ['a', 'b', 'c']
console.log(Array.from('\u{1F642}'));  // 한 코드 포인트를 담은 배열

정규표현식을 구분자로 사용할 수도 있습니다. 캡처 그룹이 있는 정규표현식은 구분자와 일치한 부분까지 결과 배열에 넣을 수 있으므로 예상과 달라질 수 있습니다. 또한 CSV 파일의 따옴표 안에 쉼표가 들어갈 수 있다면 split(",")만으로 올바르게 파싱할 수 없습니다. 그 경우 CSV 형식을 이해하는 파서를 사용하세요.