[JS] 문장, 단어, 자소별로 문자열 분리하기

split() 메서드의 문제점

---

자바스크립트에서 문자열을 분리할 때 일반적으로 split() 메서드를 사용한다. 하지만 아래처럼 구분자는 결과 배열에서 제외되고 불필요한 공백이 추가된다. 즉, language-sensitive 하지 않는 단점이 있다. language-sensitive는 문맥에 맞는 표현과 용어 사용을 의미한다. 한국어로는 언어 감수성이라고 부른다. 

'Hello! How are you?'.split(/[.!?]/);
// ['Hello', ' How are you', '']

 

💡 정규식 관련 참고

• 표현식을 하나의 단위로 취급하는 포획 괄호를 사용하면 구분자도 결과 배열에 포함할 수 있다
• [] 문자 그룹은 대괄호 내부 문자열 중 하나라도 일치하는 경우를 의미한다

 

Intl 자바스크립트 API를 활용하면 위 같은 문제를 말끔하게 해결할 수 있다.

 

Intl.Segmenter

---

Intl.Segmenter 메서드를 사용하면 문자열을 의미있는 단위로 분리할 수 있다. locale, granularity를 정의한 후 segment 메서드 파라미터에 분리하고 싶은 문자열을 추가하는 방식으로 사용한다.

 

💡 granularity 옵션(颗粒选项) 종류

• sentence: 문장 단위로 분리
• word: 단어 단위로 분리
• grapheme: 문자소(의미를 나타내는 최소 단위) 단위로 분리

 

segment 메서드는 정의한 locale, granularity 옵션에 따라 문자열의 세그먼트를 나타내는 Segments 인스턴스를 반환한다. Segments 인스턴스는 이터러블이다. 따라서 전개연산자, Array.from, for of 문 등에서 사용할 수 있다.

 

granularity: 'word' 일 때 ▼

const segmenterKo = new Intl.Segmenter('ko', { granularity: 'word' });
const segmentsKo = segmenterKo.segment('안녕하세요, 반갑습니다');

console.log([...segmentsKo]);
/*
{ segment: '안녕하세요', index: 0, input: '안녕하세요, 반갑습니다', isWordLike: true }
{ segment: ',', index: 5, input: '안녕하세요, 반갑습니다', isWordLike: false }
{ segment: ' ', index: 6, input: '안녕하세요, 반갑습니다', isWordLike: false }
{ segment: '반갑습니다', index: 7, input: '안녕하세요, 반갑습니다', isWordLike: true }
*/

 

granularity: 'sentence' 일 때 ▼

const segmenterKo = new Intl.Segmenter('ko', { granularity: 'sentence' });
const segmentsKo = segmenterKo.segment('안녕하세요, 반갑습니다');

console.log([...segmentsKo]);
/*
{ "segment": "안녕하세요, 반갑습니다", "index": 0, "input": "안녕하세요, 반갑습니다" }
*/

 

granularity: 'grapheme' 일 때 ▼

const segmenterKo = new Intl.Segmenter('ko', { granularity: 'grapheme' });
const segmentsKo = segmenterKo.segment('안녕하세요, 반갑습니다');

console.log([...segmentsKo]);
/*
{ "segment": "안", "index": 0, "input": "안녕하세요, 반갑습니다" }
{ "segment": "녕", "index": 1, "input": "안녕하세요, 반갑습니다" }
{ "segment": "하", "index": 2, "input": "안녕하세요, 반갑습니다" }
...
*/

 

isWordLike 프로퍼티

---

💡 isWordLike 프로퍼티는 word 기준으로 문자열을 분리했을 때만 포함된다

 

만약 word를 기준으로 문자열을 분리했다면, 모든 세그먼트는 단어뿐만 아니라 공백(whitespace), 구두점(punctuation), 줄바꿈(line breaks)을 포함할 수 있다. 여기서 단어만 추출하고 싶으면 isWordLike 프로퍼티를 이용해 필터링 하면 된다. isWordLike는 세그먼트가 단어와 유사한지 여부를 나타내는 불리언 값이다. 

const segmenterKo = new Intl.Segmenter('ko', { granularity: 'word' });
const segmentsKo = segmenterKo.segment('안녕하세요, 반갑습니다');

console.log([...segmentsKo].filter((s) => s.isWordLike));
/*
{ "segment": "안녕하세요", "index": 0, "input": "안녕하세요, 반갑습니다", "isWordLike": true }
{ "segment": "반갑습니다", "index": 7, "input": "안녕하세요, 반갑습니다", "isWordLike": true }
*/

 

이모지 분리하기

---

이모지로 구성된 문자열에 split() 메서드를 사용하면 유니코드 문자열을 반환한다. 이모지 문자열에 전개 연산자를 사용하면 조합형 이모지의 경우(👨‍👨‍👦‍👦) 각 이모지가 모두 분리돼서 나오는 문제가 있다.

const emojis = '🫣🫵👨‍👨‍👦‍👦';
console.log(emojis.split('')); // Split by code units
// ['\uD83E', '\uDEE3', '\uD83E', '\uDEF5', '\uD83D', '\uDC68', '‍', ...]

console.log([...emojis]); // Split by code points
// ['🫣', '🫵', '👨', '‍', '👨', '‍', '👦', '‍', '👦']

 

유니코드 문자열이 아닌 시각적 이모지를 그대로 표시하고 싶다면 Intl.Segmenter 메서드를 사용하면 된다.

const emojis = '🫣🫵👨‍👨‍👦‍👦';

const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
const segments = segmenter.segment(emojis);

console.log(Array.from(segments, (s) => s.segment)); // ['🫣', '🫵', '👨‍👨‍👦‍👦']

 

💡 Intl Explorer 사이트에서 API를 직접 테스트하면서 결과를 확인할 수 있다(Playground)

 

레퍼런스

---

How to split JavaScript strings into sentences, words or graphemes with "Intl.Segmenter"

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요