テキスト切り捨て

「1 文字」とは実際には何を意味するか

ユーザーが「1 文字」と見る場所に、JavaScript は 3 つの値を見ます。文字列 「👨‍👩‍👧‍👦」(4 人家族絵文字)は 1 つの書記素クラスター、7 つの Unicode コードポイント(Zero-Width Joiner U+200D で結合)、および 11 個の UTF-16 コードユニット です。これが JavaScript で "👨‍👩‍👧‍👦".length === 11 となる理由です。権威ある定義は Unicode Standard Annex #29「Unicode テキストセグメンテーション」(現在のバージョン 15.0、2022 年 9 月)にあり、書記素クラスター境界、単語境界、文境界を規定しています。現代の JavaScript は ECMAScript 2022 で標準化された Intl.Segmenter を通じて UAX #29 を公開しており、Firefox 125(2024 年 4 月)以降すべてのブラウザで出荷されています;Chrome はバージョン 87(2020 年 11 月)から、Safari は 14.1(2021 年 4 月)から。new Intl.Segmenter('ja', { granularity: 'grapheme' }) を使用して、人間が数えるように数えてください。

出荷するプラットフォームでの文字制限

• Google 検索メタ説明:強制上限はありませんが、SERP スニペットは通常、デスクトップで 155-160 文字、モバイルで約 120 文字 で切り捨てられます。2018 年以降、Google のガイドラインは、スニペットがページのどこからでも引き出せることを強調しており、<meta name="description"> タグだけではありません。
• Twitter / X:2017 年 11 月以降、無料アカウントで 280 文字、2023 年 5 月以降、X Premium で 25 000。特別なカウントルール:URL は長さに関係なく 23 文字 として数えられ、CJK 文字は 2 としてそれぞれ数えられます。
• SMS:GSM 7 ビットアルファベット(3GPP TS 23.038)で メッセージあたり 160 文字、ほとんどの絵文字や非ラテン文字を含む非 GSM テキストの場合、UCS-2(UTF-16)で 70 文字。マルチパート SMS は、ユーザーデータヘッダーがペイロードの 7 文字を消費するため、パートあたり 153 / 67 を使用します。
• Open Graph 説明(Facebook):推奨 110-200 文字、切り捨ては通常 300。
• Twitter Card 説明:最大 200 文字、それを超えると省略記号で切り捨て。
• LinkedIn 投稿:合計 3 000 文字ですが、「もっと見る」切り捨てはデスクトップで約 210 文字 でトリガーされます。
• Web Push 通知本文:正式な制限はありませんが、iOS は約 110 文字で切り捨て、Android は約 200 を表示します。
• データベース VARCHAR(N):レガシー utf8 照合の MySQL では、N はバイト;utf8mb4 では、N は文字。PostgreSQL varchar(N) は常に文字です。

単語境界は単なる split(' ') ではない

素朴な単語境界トランケータは /\s+/ で入力を分割し、制限を超える最初の単語の前で切ります。これは英語では機能します。中国語、日本語、韓国語、タイ語 では失敗します。これらはどれも単語間に空白を使用しません:入力全体が 1 つの「単語」として終わるため、トリマーはすべてを保持するか、すべてを切るかのいずれかです。アラビア語 はスペースを使用しますが、境界位置を変える方法で文字形状を結合します。granularity: 'word' の Intl.Segmenter は UAX #29 単語境界アルゴリズムを適用し、すべての言語に対して正しいカットを生成します。また、「単語のような」セグメント(isWordLike: true を返す)を句読点や空白のセグメントから区別するため、セグメントを 1 回パスして文字予算の前の最後の単語境界を見つけることができます。

CSS 切り捨て:text-overflow と line-clamp

DOM 内のフルテキストを保持しながら 視覚的に 切り捨てることが目標である場合(スクリーンリーダー、検索エンジン、コピー&ペーストで使用可能なまま保つため)、CSS を使用してください。1 行切り捨て には 3 つのプロパティが一緒に必要です:overflow: hidden; white-space: nowrap; text-overflow: ellipsis;。text-overflow: ellipsis は CSS Basic User Interface Module Level 4(W3C Candidate Recommendation 2021 年 8 月)で定義されており、Firefox 7(2011 年 9 月)以降すべてのブラウザで出荷されています;Internet Explorer 6 は 2001 年 8 月にはすでに持っていました。複数行切り捨て は display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; を使用します。-webkit-line-clamp プロパティは WebKit 2009 のもので、現在は CSS Overflow Module Level 3(W3C Working Draft)で定義されています。プレフィックスなしの line-clamp は Safari 18(2024 年 9 月)および Firefox 125(2024 年 4 月)で出荷されており、フォールバックとして常に -webkit- 形式を含めてください。重大な制限:CSS 切り捨ては純粋に表現的です。完全なテキストは依然として HTML ソースにあるため、SEO スニペット、メールサマリー、および JS 駆動の検索インデックスはすべて切り捨てられていない文字列を見ます。

よくある間違い

• 制限に str.length を使用する。JavaScript の String.prototype.length は UTF-16 コードユニットを返し、文字ではありません。3 つの親指を立てた絵文字「👍👍👍」を含むステータスは length === 6 を報告します;Twitter はそれを 3 として数えます。
• サフィックスの長さを引かない。予算が 160 文字で … を追加する場合、テキスト本体は作業に使える 159 文字があります。多くの素朴な実装は制限を超える文字列を生成します。
• CJK およびタイ語を空白で分割する。単語間スペースのない言語は分割できなくなります。granularity: 'word' の Intl.Segmenter を使用してください。
• 末尾の句読点を削除する前に切る。「こんにちは、世界!」を 8 文字に切り詰めると、素朴には「こんにちは、」、賢ければ「こんにちは…」、さらに賢ければ末尾のカンマも削除して「こんにちは…」になります。
• HTML タグ内で切り捨てる。<a href="long-url">text</a> を 30 文字で切り捨てると、閉じていないタグを持つ文字列が生成されます。最初に HTML をストリップするか、DOM 対応のトランケータを使用してください。
• 3 つのドット対 1 つの省略記号。Unicode 省略記号 …(U+2026)は 1 文字、3 つのドット ... は 3 つです。プラットフォームの文字カウンターに適したものを選んでください。
• クライアント側検証に <input maxlength> を信頼する。HTML Living Standard は UTF-16 コードユニットを数えるため、絵文字を貼り付けるユーザーは、Unicode を認識するバックエンドバリデーターとは異なるカウントを見ます。サーバー側で検証してください。

その他のよくある質問

なぜ Twitter は私の URL がはるかに長いのに 23 文字として数えるのですか?

Twitter は分析と不正検出のために t.co ショートナーを通じて各 URL をラップするため、ショートナーの最悪のケースの長さで各 URL を請求します:HTTPS の場合 23 文字。100 文字の URL を書くと、Twitter の UI では 23 として数えられます。同じルールが Twitter Card メタデータに適用されます。バイトパーフェクトなシミュレーションが必要な場合、オープンソースライブラリ twitter-text(Twitter、MIT)が正確なルールを実装します。

このツールはアラビア語やヘブライ語などの RTL 言語を尊重しますか?

テキストコンテンツは、その bidi(双方向)マーカーを含めて保持されます。切り捨ては論理順序の文字に対して動作するため、アラビア語の文を文字 100 で切ることは、100 番目の論理文字(スクリーンリーダーが最初にアナウンスするもの)で切ります。右から左への流れにより表示順序は視覚的に反転する可能性がありますが、基底文字列は一貫しています。

なぜ切り捨てられた SMS が 161 文字でまだ 3 つの部分に分割されているのですか?

SMS はラテン文字のみのテキストに 7 ビット GSM エンコーディングを使用し、1 セグメントに 160 文字を収めます。しかし GSM-7 の外側の文字、自動修正からのカーリー「スマート」引用符(U+2018 / U+2019)、Unicode 省略記号(U+2026)、絵文字を含む文字は、メッセージ全体を UCS-2 エンコーディングに強制し、セグメントあたり 70 文字 になります。切り捨てられた 160 文字のメッセージに 1 つのスマート引用符が含まれている場合、キャリアはそれを 3 つの 70 文字 UCS-2 部分に分割します。SMS のスマート引用符を ASCII 引用符に置き換えてください。

タグを壊さずに HTML 形式のテキストを切り捨てることができますか?

文字をカウントするカットでは安全ではありません。最初に HTML タグをストリップする(DOMParser またはサーバー側パーサー経由)、プレーンテキストを切り捨て、オプションで再ラップするか、ノードツリーを歩いてテキストノード全体のプレフィックスをクローンする DOM 認識トランケータを使用してください。HTML 文字列に対する純粋な正規表現は安全ではありません(HTML は正規言語ではありません)。

サーバーに何か送信されますか?

いいえ。貼り付けるテキスト、選択する制限、設定するサフィックス、切り捨てられた出力はすべてブラウザの JavaScript で処理されます。ネットワーク呼び出しは行われず、入力のコピーは保存されません。確認するには DevTools のネットワークタブを開いてください。