Menghitung jumlah kata menggunakan JavaScript adalah kebutuhan umum saat kalian membuat fitur analisis teks, validasi form, sampai limit caption di web.
Halo teman-teman, semoga kreatifitas koding kalian lancar! Pada artikel ini kodelyly.com akan membahas cara praktis, akurat, dan efisien untuk menghitung jumlah kata, lengkap dengan contoh fungsi serta implementasi di HTML.
Menghitung Jumlah Kata Menggunakan JavaScript
Cara paling sederhana adalah memanfaatkan trim() lalu memecah string berdasarkan spasi berurutan. Ini cepat dan cukup akurat untuk banyak kasus.
function countWordsSimple(text) {
const t = text.trim();
if (!t) return 0;
// Pisahkan berdasarkan satu atau lebih whitespace (spasi, tab, baris baru)
return t.split(/\s+/).length;
}
Namun, pendekatan ini masih menghitung token yang bukan kata jika ada simbol yang berdempetan. Untuk akurasi lebih baik, gunakan regex yang menargetkan “kata” berdasarkan karakter huruf/angka.
// Menggunakan Unicode Property Escapes (butuh browser modern)
function countWordsRegex(text) {
const words = text.match(/\p{L}[\p{L}\p{M}\p{N}'’]*/gu);
return words ? words.length : 0;
}
Penjelasan singkat: \p{L} untuk huruf, \p{M} tanda diakritik, \p{N} angka; '’ mengakomodasi apostrof/penyingkat.
Menangani Spasi Ganda Dan Tanda Baca
Jika input sering berisi spasi ganda, baris baru, atau tanda baca berturut-turut (misal teks hasil paste), gunakan pembersihan ringan sebelum menghitung.
function normalizeText(text) {
return text
.replace(/[\u0000-\u001F\u007F]/g, " ") // kontrol -> spasi
.replace(/[\s\u00A0]+/g, " ") // semua whitespace -> satu spasi
.trim();
}
function countWordsRobust(text) {
const t = normalizeText(text);
if (!t) return 0;
const words = t.match(/\p{L}[\p{L}\p{M}\p{N}'’]*/gu);
return words ? words.length : 0;
}
Jika perlu dukungan browser lama tanpa Unicode Property Escapes, kompromi aman adalah t.match(/[A-Za-z0-9À-ÖØ-öø-ÿ]+/g).
Contoh Implementasi Di HTML
Contoh mini app yang menghitung kata saat kalian mengetik.
<!doctype html>
<html lang="id">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Menghitung Jumlah Kata – Kodelyly</title>
<style>
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;max-width:720px;margin:40px auto;padding:0 16px}
textarea{width:100%;min-height:160px;padding:12px;border:1px solid #ddd;border-radius:12px}
.card{margin-top:12px;padding:12px;border:1px solid #eee;border-radius:12px}
.muted{opacity:.75}
</style>
<body>
<h1>Menghitung Jumlah Kata Menggunakan JavaScript – kodelyly.com</h1>
<textarea id="input" placeholder="Tulis teks kalian di sini..."></textarea>
<div class="card">
<div><strong>Kata:</strong> <span id="words">0</span></div>
<div class="muted">Karakter (tanpa spasi): <span id="chars">0</span></div>
</div>
<script>
function countWords(text){
const t = text
.replace(/[\u0000-\u001F\u007F]/g, ' ')
.replace(/[\s\u00A0]+/g, ' ')
.trim();
if(!t) return 0;
const m = t.match(/\p{L}[\p{L}\p{M}\p{N}'’]*/gu);
return m ? m.length : 0;
}
const el = document.getElementById('input');
const outWords = document.getElementById('words');
const outChars = document.getElementById('chars');
el.addEventListener('input', () => {
outWords.textContent = countWords(el.value);
outChars.textContent = el.value.replace(/\s+/g,'').length;
});
</script>
</body>
</html>
Perbandingan Metode
| Metode | Kelebihan | Kekurangan | Cocok Untuk |
|---|---|---|---|
split(/\s+/) | Sangat cepat, sederhana | Kurang akurat pada teks penuh simbol | Draft cepat, demo |
| Regex Unicode | Akurasi tinggi lintas bahasa | Butuh dukungan browser modern | Produksi modern |
| Regex Latin lebar | Kompatibel lebih luas | Kurang akurat untuk bahasa non-Latin | Situs yang targetnya Latin |
Tips SEO & Performa
Gunakan debounce saat menghitung pada event input (misal 150 ms) agar UX tetap mulus pada teks panjang. Tambahkan aria-live untuk hasil hitung agar ramah pembaca layar. Sertakan judul, meta description, dan heading yang memuat kata kunci utama.
Kesimpulan
Menghitung jumlah kata menggunakan JavaScript bisa dilakukan sederhana dengan split, atau lebih akurat memakai regex Unicode. Pilih metode sesuai kebutuhan proyek kalian, dan terapkan normalisasi agar hasil konsisten di berbagai variasi teks. Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat bereksperimen!