絵文字の中には国コードの組み合わせた国旗、バリエーションセレクターが後ろに続く異体字 (バリアント)、肌色を変える修飾子が続くもの (Unicode 8.0 で導入予定) など、2つのコードポイントで構成されるものもあるので、それらも考慮する必要がある場合、拡張書記素クラスターに対応したライブラリが必要になります。grapheme-breaker のコードの例を示します。
var GraphemeBreaker = require('grapheme-breaker');
// 日本の国旗
// http://www.taishukan.co.jp/kokugo/webkoku/series003_11.html
var c = String.fromCodePoint(0x1F1EF, 0x1F1F5);
console.log(c);
// バリアント
// http://unicode.org/Public/UNIDATA/StandardizedVariants.html
var c2 = String.fromCodePoint(0x267F, 0xFE0F);
console.log(c2);
// Unicode 8.0 で対応予定
// VI 型の肌色の少年
// http://www.unicode.org/reports/tr51/tr51-2.html#Diversity
// var c3 = String.fromCodePoint(0x1F466, 0x1F3FF);
// console.log(c3);
var str = c + c2;
// 拡張書記素クラスターの数
console.log(GraphemeBreaker.countBreaks(str));
var length = str.length;
var previous = 0;
var current = 0;
while (current < length) {
previous = current;
current = GraphemeBreaker.nextBreak(str, previous);
console.log(str.slice(previous, current));
}
文字数のバリデーションを扱う際に、1つの拡張書記素クラスターを構成する要素数の上限がないことを考慮する必要があります。
var c = "\u267F" + "\uFE0F".repeat(10000);
console.log(1 === GraphemeBreaker.countBreaks(c));
Chrome や Intl を有効にした node/iojs であれば、Intl.v8BreakIterator を使うことができます。
var c = String.fromCodePoint(0x1F1EF, 0x1F1F5);
var c2 = String.fromCodePoint(0x267F, 0xFE0F);
var str = c + c2;
console.log(2 === graphemeLength(str, ['ja-JP']));
function graphemeLength(str, locales)
{
var it = new Intl.v8BreakIterator(locales, {type: 'character'});
it.adoptText(str);
var length = 0;
var previous = 0;
var current = it.first();
while (current !== -1) {
current = it.next();
if (current === -1) {
break;
}
previous = current;
++length;
}
return length;
}