文字数カウントから検索まで、日本語の実用例

const segmenter = new Intl.Segmenter(locales, options);
const segments = segmenter.segment(string);

const graphemeSegmenter = new Intl.Segmenter("ja", { granularity: "grapheme" });

function countGraphemes(text) {
  return [...graphemeSegmenter.segment(text)].length;
}

// 通常の文字
console.log(countGraphemes("こんにちは")); // 5

// サロゲートペア（絵文字）
console.log(countGraphemes("🍣🍺")); // 2

// ZWJ結合絵文字（家族）
console.log(countGraphemes("👨‍👩‍👧‍👦")); // 1

// 国旗絵文字（地域指示記号2文字の組み合わせ）
console.log(countGraphemes("🇯🇵")); // 1

// 異体字セレクター
console.log(countGraphemes("葛󠄀")); // 1  <= "葛󠄀".length は 3

function countGraphemesFast(text) {
  let count = 0;
  for (const _ of graphemeSegmenter.segment(text)) {
    count++;
  }
  return count;
}

const wordSegmenter = new Intl.Segmenter("ja", { granularity: "word" });

function wrapWords(text) {
  const fragments = [];

  for (const { segment, isWordLike } of wordSegmenter.segment(text)) {
    if (isWordLike) {
      // 単語は折り返されないよう inline-block の span で囲む
      fragments.push(`<span class="word-unit">${segment}</span>`);
    } else {
      // 記号や空白はそのまま出力する
      fragments.push(segment);
    }
  }

  return fragments.join("");
}

const html = wrapWords("最新のWebフロントエンド技術を学ぶ。");
console.log(html);
// Chrome 154による分割（見やすさのため改行）:
//
// <span class="word-unit">最新</span>
// <span class="word-unit">の</span>
// <span class="word-unit">Web</span>
// <span class="word-unit">フロント</span>
// <span class="word-unit">エンド</span>
// <span class="word-unit">技術</span>
// <span class="word-unit">を</span>
// <span class="word-unit">学ぶ</span>
// 。

const items = [
  "フライパンで炒める",
  "朝食にパンを食べる"
];

// 「パン」で検索したい
const query = "パン";

// 単純な includes では「フライパン」の末尾にも一致してしまう
const result = items.filter(text => text.includes(query));
console.log(result);
// ["フライパンで炒める", "朝食にパンを食べる"]

const wordSegmenter = new Intl.Segmenter("ja", { granularity: "word" });

function filterByWord(items, targetWord) {
  return items.filter(text => {
    // 文章を単語に分解し、記号や空白を除外する
    const words = [...wordSegmenter.segment(text)]
      .filter(item => item.isWordLike)
      .map(item => item.segment);

    return words.includes(targetWord);
  });
}

const items = [
  "フライパンで炒める",
  "朝食にパンを食べる"
];

console.log(filterByWord(items, "パン"));
// ["朝食にパンを食べる"]

const sentenceSegmenter = new Intl.Segmenter("ja", { granularity: "sentence" });

const text = "こんにちは！　本日の天気は晴れです。お出かけには最適な一日になるでしょう。";

for (const { segment, index } of sentenceSegmenter.segment(text)) {
  console.log(`[位置: ${index}] ${segment.trim()}`);
}
// [位置: 0] こんにちは！
// [位置: 7] 本日の天気は晴れです。
// [位置: 18] お出かけには最適な一日になるでしょう。

const segmenter = new Intl.Segmenter("ja", { granularity: "sentence" });

const text = "彼は悪い笑みを浮かべながら「ほら、こう言うんだ。『これはペンです。リンゴではありません』って。はっきりとね」と言って、私を見つめた。";

for (const { segment, index } of segmenter.segment(text)) {
  console.log(`[位置: ${index}] ${segment.trim()}`);
}
// [位置: 0] 彼は悪い笑みを浮かべながら「ほら、こう言うんだ。『
// [位置: 25] これはペンです。
// [位置: 33] リンゴではありません』って。
// [位置: 47] はっきりとね」と言って、私を見つめた。