About

福岡生活とWeb制作がメインのブログです。福岡在住のフロントエンジニアでECサイトの運営(ディレクション+フロント周りの制作)をやっています。


Search


Category


Tags


Archive


サロゲートペアも文字数を正しくカウントする方法

  • 投稿日:2017年5月1日
  • カテゴリーとタグ:javascript

文字列のlenghtを取得して何か処理する際、通常は1文字でカウントされるが、一部の文字に例外があるので注意。
いままで知らなかったのでメモ。

サロゲートペアとは

細かい説明ができないのですが、文字数をカウントする際に、意図しない結果を返すことがあります。まずは以下のコードを見てください。文字数はいくつでしょうか?

var message = '叱る';
console.log(message.length);

答えは3です。

え、2文字じゃないの?!
いいえ、3文字です。「叱」がサロゲートペアという文字であるために起きる問題です。UniCode(UTF-8)は、1文字2バイトで表現するが、Unicodeで扱うべき文字が増えるに伴い、2バイトで表現できる文字数(65535文字)では不足してしまい、そこで一部の文字は4バイトで表現された文字のこと。

lenghtはサロゲートペアを識別できないため、「叱(4バイト)る(2バイト)」 = 3文字と判定されてしまう。

正しくカウントするには

前半の2バイト、後半の2バイトでサロゲートペアの文字を判定し、splitで区切ることでサロゲートペアの文字を判別する。

var message = '叱る';
var len = message.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g).length - 1;
console.log(message.length - len); //-> 2;

以下の書籍より