Ketika membuat program atau website, terkadang kita menjumpai sebuah segmen yang berisi tulisan cukup panjang, di mana desainer merancang segmen ini sedemikian rupa sehingga saat awal ditayangkan, hanya beberapa puluh kata bagian awal tulisan saja yang ditampilkan untuk menghemat tempat. Dan apabila pengguna mengeklik tombol “view more” barulah seluruh tulisannya ditayangkan. Rancangan antarmuka seperti ini cukup sering digunakan terutama pada implementasi website yang berisikan artikel sebagai konten utamanya, misalnya situs surat kabar, blog, toko buku, situs resensi, dan sebagainya.
WordPress pun melakukan implementasi antarmuka semacam ini. Sebagai contoh, apabila kita membaca tulisan artikel ini di daftar tulisan di halaman depan blog.raffer.one, maka yang terlihat adalah judul, dan sepenggal paragraf tulisan saja. Seperti ini:
Dalam membuat program, cara paling mudah adalah dengan mengambil sekian ratus karakter dari tulisan, menggunakan fungsi substr (C, PHP) atau substring (JavaScript).
$excerpt = substr($text, 0, 175) . " [...]";
Meski demikian, cara ini kurang elegan karena kata seringkali terpenggal. Misalnya untuk contoh di atas, apabila dipotong sebanyak 175 karakter, maka potongannya menjadi:
Ketika membuat program atau website, terkadang kita menjumpai sebuah segmen yang berisi tulisan cukup panjang, di mana desainer merancang segmen ini sedemikian rupa sehingga s […]
Potongan tulisan bisa dibuat lebih fleksibel agar kata terakhir tetap diambil seluruhnya tanpa terpotong (“saat” bukan “s” saja) tanpa baris kode yang banyak dengan menggunakan regular expression.
preg_match('/^.{0,175}[^\s]*/', $text, $matches);
$excerpt = $matches[0] . " [...]";
Contoh kode di atas adalah untuk PHP. Pada bahasa pemrograman lain sintaks bisa disesuaikan. Namun yang terpenting adalah pola regular expression yang digunakan. Jika Anda tidak tahu apa itu regular expression, silakan buka Google, cari artikel mengenai regular expression dan pelajari lebih lanjut. Ini adalah salah satu teknik yang sangat penting dan bermanfaat di dunia pemrograman.
Kembali ke topik, apabila kode di atas dieksekusi, maka potongannya menjadi:
Ketika membuat program atau website, terkadang kita menjumpai sebuah segmen yang berisi tulisan cukup panjang, di mana desainer merancang segmen ini sedemikian rupa sehingga saat […]
Terlihat lebih indah bukan?
Kuncinya terletak pada pola regular expression ini: /^.{0,175}[^\s]*/
Tanda ^ pada awal pola menunjukkan pencocokan harus dimulai dari awal teks. .{0,175} berarti ambil karakter apa saja (.) sebanyak sekurang-kurangnya 0 dan sebanyak-banyaknya 175 karakter. Berikutnya [^\s]* berarti ambil 0 atau lebih karakter yang bukan whitespace (spasi, tab, enter). Hasilnya, tulisan yang semula hanya terambil 175 karakter sampai dengan huruf “s” dari “saat”, kini ditambah dengan tiga karakter berikutnya (“aat”) sampai dengan tanda spasi sebagai batas akhir (spasi tidak ikut diambil).