🍆
JavaScriptで絵文字を手軽かつ正確にカウントする
JavaScriptで絵文字を length でカウントすると、2文字だったり11文字扱いになります。
「😀👨👩👧👦👨👩👧👦😀😀」は25文字扱いになります。
これを解決するために下記の手順でカウントを行えるようにします。
- 入力された文字列の絵文字を「$」などの文字に置換する。
- 置換した文字列を length でカウントする。
この方法で絵文字を1文字としてカウントできます。
完成図
【やってみよう】置換する
npm i emoji-regex
を実行して、 emoji-regex をインストールします。
import emojiRegex from "emoji-regex";
const inputValue = "😀👨👩👧👦👨👩👧👦😀😀";
const replacedValue = inputValue.replace(emojiRegex(), "$")
console.log(replacedValue.length);
で置換して、lengthで文字数を取得して完了です！
なぜ $ なのか？
理由はありません。
LINEがやってるからです。（）
ついでにサロゲートペアにも耐えておく（予想外の文字にそれなりに耐える）
「😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀」を普通にlengthすると37文字扱いで滅茶苦茶。
ネットで得た情報の寄せ集めで解決！
import emojiRegex from "emoji-regex";
const inputValue = "😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀";
const replacedEmojiValue = inputValue.replace(emojiRegex(), "$")
console.log(Array.from(replacedEmojiValue).length);
const a = "😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶𨸶😀😀👨👩👧👦👨𨨞𨨞𨨞👩👧𧾷👦😀𨸶";
// 418文字らしい
さすがに数千文字を超えると処理が重くなるようですが、
数百程度であれば全然気にしなくてもいいレベルだと思います。（知らんけど）
Discussion