Teks Truncator

Apa yang sebenarnya dimaksud dengan «satu karakter»

Pengguna melihat satu «karakter» di mana JavaScript melihat tiga nilai. String «👨‍👩‍👧‍👦» (emoji keluarga empat) adalah satu cluster grafem, tujuh titik kode Unicode yang disatukan oleh Zero-Width Joiner (U+200D), dan sebelas unit kode UTF-16. Itulah mengapa di JavaScript "👨‍👩‍👧‍👦".length === 11. Definisi otoritatif hidup di Unicode Standard Annex #29 «Unicode Text Segmentation» (versi saat ini 15.0, September 2022), yang menentukan batas cluster grafem, batas kata, dan batas kalimat. JavaScript modern mengekspos UAX #29 melalui Intl.Segmenter, distandardisasi di ECMAScript 2022 dan dikirim di setiap browser sejak Firefox 125 (April 2024); Chrome memilikinya sejak versi 87 (November 2020) dan Safari sejak 14.1 (April 2021). Gunakan new Intl.Segmenter('id', { granularity: 'grapheme' }) untuk menghitung seperti manusia menghitung.

Batas karakter di seluruh platform tempat Anda mengirim

• Meta deskripsi Google Search: tidak ada batas yang diberlakukan, tetapi snippet SERP biasanya memotong pada 155-160 karakter di desktop dan sekitar 120 di mobile. Sejak 2018, panduan Google sendiri menekankan bahwa snippet dapat diambil dari mana saja di halaman, bukan hanya tag <meta name="description">.
• Twitter / X: 280 karakter untuk akun gratis sejak November 2017, 25 000 untuk X Premium sejak Mei 2023. Aturan penghitungan khusus: URL apa pun dihitung sebagai 23 karakter terlepas dari panjangnya, dan karakter CJK dihitung sebagai 2 masing-masing.
• SMS: 160 karakter per pesan dalam alfabet GSM 7-bit (3GPP TS 23.038), 70 karakter di UCS-2 (UTF-16) untuk teks non-GSM termasuk sebagian besar emoji dan skrip non-Latin. SMS multi-bagian menggunakan 153 / 67 per bagian karena User Data Header mengonsumsi 7 karakter payload.
• Deskripsi Open Graph (Facebook): direkomendasikan 110-200 karakter, pemotongan biasanya di 300.
• Deskripsi Twitter Card: maksimum 200 karakter, dipotong dengan ellipsis di luar itu.
• Postingan LinkedIn: total 3 000 karakter, tetapi pemotongan «lihat lebih banyak» dipicu pada sekitar 210 karakter di desktop.
• Body notifikasi Web Push: tidak ada batas formal, tetapi iOS memotong sekitar 110 karakter dan Android menunjukkan sekitar 200.
• Database VARCHAR(N): di MySQL dengan kollasi utf8 warisan, N adalah byte; dengan utf8mb4, N adalah karakter. PostgreSQL varchar(N) selalu karakter.

Batas kata bukan hanya split(' ')

Truncator batas kata yang naif membagi input pada /\s+/ dan memotong sebelum kata pertama yang mendorong Anda melewati batas. Itu bekerja untuk bahasa Inggris. Itu gagal pada Cina, Jepang, Korea, dan Thailand, tidak satupun yang menggunakan spasi antara kata: seluruh input berakhir sebagai satu «kata», sehingga pemangkas mempertahankan semuanya atau memotong semuanya. Arab menggunakan spasi tetapi menyatukan bentuk huruf dengan cara yang mengubah posisi batas. Intl.Segmenter dengan granularity: 'word' menerapkan algoritma batas kata UAX #29 dan menghasilkan potongan yang benar untuk setiap bahasa. Itu juga membedakan segmen «seperti kata» (mengembalikan isWordLike: true) dari segmen tanda baca dan spasi, sehingga Anda dapat menemukan batas kata terakhir sebelum anggaran karakter Anda dengan satu lintasan atas segmen.

Pemotongan CSS: text-overflow dan line-clamp

Jika tujuannya adalah memotong secara visual sambil mempertahankan teks lengkap di DOM (sehingga tetap tersedia untuk pembaca layar, mesin pencari, dan salin-tempel), gunakan CSS. Pemotongan satu baris membutuhkan tiga properti bersama: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;. text-overflow: ellipsis didefinisikan dalam CSS Basic User Interface Module Level 4 (W3C Candidate Recommendation Agustus 2021) dan telah dikirim di setiap browser sejak Firefox 7 (September 2011); Internet Explorer 6 sudah memilikinya sejak Agustus 2001. Pemotongan multi-baris menggunakan display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;. Properti -webkit-line-clamp berasal dari WebKit 2009 dan sekarang didefinisikan di CSS Overflow Module Level 3 (W3C Working Draft). line-clamp tanpa awalan dikirim di Safari 18 (September 2024) dan Firefox 125 (April 2024); selalu sertakan bentuk -webkit- sebagai fallback. Batasan kritis: pemotongan CSS murni presentasi. Teks lengkap masih ada di sumber HTML, sehingga snippet SEO, ringkasan email, dan indeks pencarian yang digerakkan JS semua melihat string yang tidak terpotong.

Kesalahan umum

• Menggunakan str.length untuk batas. String.prototype.length JavaScript mengembalikan unit kode UTF-16, bukan karakter. Status dengan tiga emoji jempol ke atas «👍👍👍» melaporkan length === 6; Twitter menghitungnya sebagai 3.
• Tidak mengurangi panjang sufiks. Jika anggaran Anda 160 karakter dan Anda menambahkan …, body teks Anda memiliki 159 karakter untuk bekerja. Banyak implementasi naif menghasilkan string di atas batas.
• Memisahkan CJK dan Thai dengan spasi. Bahasa tanpa spasi antar kata menjadi tidak dapat dibagi. Gunakan Intl.Segmenter dengan granularity: 'word'.
• Memotong sebelum menghapus tanda baca akhir. «Halo, dunia!» dipangkas ke 8 karakter menjadi «Halo, d» secara naif, atau «Halo,…» jika cerdas, atau «Halo…» jika lebih cerdas dan menghapus koma akhir.
• Memotong di dalam tag HTML. Memotong <a href="long-url">text</a> menjadi 30 karakter menghasilkan string dengan tag tidak tertutup. Lepaskan HTML terlebih dahulu atau gunakan truncator yang sadar DOM.
• Tiga titik vs satu ellipsis. Ellipsis Unicode … (U+2026) adalah satu karakter, tiga titik ... adalah tiga. Pilih yang tepat untuk penghitung karakter platform.
• Mempercayai <input maxlength> untuk validasi sisi klien. HTML Living Standard menghitung unit kode UTF-16, sehingga pengguna yang menempelkan emoji melihat hitungan yang berbeda dari validator backend Anda yang sadar Unicode. Validasi di sisi server.

Pertanyaan yang lebih sering diajukan

Mengapa Twitter menghitung URL saya sebagai 23 karakter padahal jauh lebih panjang?

Twitter membungkus setiap URL melalui shortener t.co-nya untuk analitik dan deteksi penyalahgunaan, sehingga menagih setiap URL pada panjang kasus terburuk shortener: 23 karakter untuk HTTPS. Jika Anda menulis URL 100-karakter, dihitung sebagai 23 di antarmuka Twitter. Aturan yang sama berlaku untuk metadata Twitter Card. Library open-source twitter-text (Twitter, MIT) menerapkan aturan persis jika Anda memerlukan simulasi sempurna pada byte.

Apakah alat ini menghormati bahasa RTL seperti Arab dan Ibrani?

Konten teks dipertahankan termasuk penanda bidi (bidirectional)-nya. Pemotongan beroperasi pada karakter dalam urutan logis, sehingga memotong kalimat Arab pada karakter 100 memotong pada karakter logis ke-100 (yang akan diumumkan pembaca layar terlebih dahulu). Urutan tampilan dapat terbalik secara visual karena aliran kanan-ke-kiri, tetapi string yang mendasari konsisten.

Mengapa SMS terpotong saya masih dibagi menjadi tiga bagian pada 161 karakter?

SMS menggunakan pengkodean GSM 7-bit untuk teks hanya Latin, memasukkan 160 karakter dalam satu segmen. Tetapi karakter apa pun di luar GSM-7, termasuk tanda kutip melengkung «pintar» dari autocorrect (U+2018 / U+2019), ellipsis Unicode (U+2026), atau emoji, memaksa seluruh pesan ke pengkodean UCS-2 pada 70 karakter per segmen. Jika pesan 160-karakter Anda yang terpotong berisi satu tanda kutip pintar, operator membaginya menjadi tiga bagian UCS-2 70-karakter. Ganti tanda kutip pintar dengan tanda kutip ASCII untuk SMS.

Bisakah saya memotong teks berformat HTML tanpa merusak tag?

Tidak aman dengan potongan penghitungan karakter. Lepaskan tag HTML terlebih dahulu (melalui DOMParser atau parser sisi server), potong teks biasa, kemudian secara opsional bungkus ulang; atau gunakan truncator yang sadar DOM yang berjalan di pohon node dan mengkloning prefix node teks utuh. Regex murni pada string HTML tidak aman (HTML bukan bahasa reguler).

Apakah ada yang dikirim ke server?

Tidak. Teks yang Anda tempel, batas yang Anda pilih, sufiks yang Anda atur, dan output terpotong semuanya diproses di JavaScript browser Anda. Tidak ada panggilan jaringan yang dibuat dan tidak ada salinan input Anda yang disimpan. Buka tab Jaringan di DevTools untuk memverifikasi.