javascript로 글자수 세기 위한 노력

string 타입의 문자열의 길이를 어떻게 구할수 있을까요?

 

무척이나 간단합니다

 

"hello".length // 5

 

이렇게 셀수 있어요

 

 

그러면 영어말고 한글은 어떻게 될까요?

 

 

"안녕하세요".length // 5

 

똑같은 방식으로 셀수 있습니다

 

 

그러면 일본어는?

 

"こんにちは".length // 5

 

오우! 모두다 실제 사람이 읽을수 있는 글자수만큼 정확히 세어지네요

 

 

 

그렇다면 이모지는 어떨까요?

 

 

"🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻".length // 24

 

3을 기대했으나 3개의 이모지를 사용했을뿐인데 length는 24가 나왔네요

 

이모지는 각각의 이모지마다 서로다른 length를 가지고 있어서

 

length로 계산할 경우 예측할수 없는 length를 리턴하게 됩니다

 

 

 

하나의 이모지를 하나로 세고 싶을때 어떻게 하면 될까요?

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter

Intl.Segmenter - JavaScript | MDN

 

Intl.Segmenter를 이용하여 셀수 있습니다

 

nodejs 16 이상에서도 같은 방법으로 글자수를 셀수 있습니다

 

segmenter를 이용하여 세어볼까요?

 

[...new Intl.Segmenter().segment('🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻')].length; // 3

 

원하는 값이 나왔습니다

 

 

그런데 당혹스러운 사실은

 

Intl.Segmenter가 firefox를 지원하지 않습니다...

 

 

https://www.npmjs.com/package/grapheme-splitter

grapheme-splitter

 

글자수를 세는 유명한 npm 패키지가 있는데요

 

이것으로 한번 세어봅니다

 

파이어폭스도 지원합니다

 

 

 

그런데이게 왠일이죠?

 

var splitter = new GraphemeSplitter();
var graphemeCount = splitter.countGraphemes('👩‍🦰👩‍👩‍👦‍👦🏳️‍🌈');
console.log(graphemeCount); // 4

console.log([...new Intl.Segmenter().segment('👩‍🦰👩‍👩‍👦‍👦🏳️‍🌈')].length); // 3

 

특정 이모지의 글자수가 제대로 세어지지 않습니다

 

이슈를 살펴보니 unicode 11 이상은 제대로 동작하지 않는것들이 있다는군요

 

 

 

이런면에서 보았을때 Intl.segment는 여기서도 제대로 글자수를 세고 있네요

 

아 이것을 써야하는데 왜 하필 firefox가 지원을 안해서...

 

 

 

그러던 와중에 매우 좋은 솔루션을 발견합니다

 

https://www.npmjs.com/package/lodash

lodash

유명한 lodash 패키지의 함수중에 toArray() 라는 함수가 있는데요

 

이 함수가 string 타입을 array 형태로 변경할때 유니코드인지 구분을 하여 배열을 생성합니다

 

var lodash = require('lodash');
console.log(lodash.toArray('👩‍🦰👩‍👩‍👦‍👦🏳️‍🌈').length); // 3

 

그래서 string을 lodash의 toArray()를 이용하여 이렇게 배열로 만든뒤에 원소의 갯수를 세면 정확하게 글자수를 셀수 있습니다

 

 

글자수 세기 참 험난하군요