Tentu, berikut adalah artikel tentang cara menghitung jumlah kata dalam sebuah teks menggunakan JavaScript.

Selain menghitung jumlah karakter, menghitung jumlah kata dalam sebuah teks juga merupakan tugas umum dalam pengembangan web. Ini bisa berguna untuk berbagai keperluan, seperti memberikan ringkasan informasi, membatasi panjang postingan, atau menganalisis konten teks.

Dengan JavaScript, kita dapat dengan mudah mengimplementasikan fungsi untuk menghitung jumlah kata dalam sebuah string atau nilai dari elemen form.

1. Struktur HTML

Kita akan menggunakan elemen textarea sebagai contoh input teks, dan sebuah elemen <span> atau <p> untuk menampilkan jumlah kata.

Contoh HTML:

Anda juga dapat menggunakan <input type="text"> jika Anda ingin menghitung kata dalam satu baris input.

2. Styling CSS (opsional)

Tambahkan CSS sesuai kebutuhan tampilan Anda. Contoh minimal:

http://googleusercontent.com/image_generation_content/9

3. Logika JavaScript (script.js)

Berikut adalah kode JavaScript untuk menghitung jumlah kata secara real-time saat pengguna mengetik di textarea:

http://googleusercontent.com/image_generation_content/10

Penjelasan Kode JavaScript

• const teksInput = document.getElementById('teksInput');: Kita mengambil elemen textarea (atau input teks) dari DOM berdasarkan ID-nya.
• const jumlahKataElement = document.getElementById('jumlahKata');: Kita mengambil elemen <span> yang akan digunakan untuk menampilkan jumlah kata.
• teksInput.addEventListener('input', function() { ... });: Kita menambahkan event listener pada elemen input. Event input akan dipicu setiap kali nilai input berubah.
• const teks = teksInput.value;: Di dalam event handler, kita mendapatkan nilai saat ini dari elemen input.
• const kata = teks.trim().split(/\s+/);: Ini adalah inti dari perhitungan jumlah kata:
  • .trim(): Metode ini menghapus spasi di awal dan di akhir string. Ini penting agar spasi di awal atau akhir tidak dihitung sebagai kata.
  • .split(/\s+/): Metode ini membagi string menjadi array substring berdasarkan pola regular expression /\s+/. Pola ini mencocokkan satu atau lebih karakter whitespace (spasi, tab, baris baru). Hasilnya adalah array yang berisi kata-kata dalam teks.
• const jumlahKata = kata.length;: Kita mendapatkan jumlah kata dengan mengambil panjang array kata.
• jumlahKataElement.textContent = jumlahKata;: Terakhir, kita memperbarui konten teks dari elemen <span> dengan nilai jumlahKata yang baru dihitung.

Penanganan Kasus Kosong

Perhatikan bahwa jika input teks kosong, setelah trim() dan split(), array kata akan memiliki satu elemen kosong jika string awalnya hanya berisi spasi, atau array kosong jika benar-benar tidak ada karakter. Panjang array akan menjadi 1 atau 0, yang sesuai dengan definisi jumlah kata dalam kasus tersebut.

Menghitung Kata Saat Halaman Dimuat

Jika Anda ingin menghitung jumlah kata saat halaman pertama kali dimuat (misalnya, jika textarea sudah memiliki teks bawaan), Anda dapat memanggil fungsi penghitungan kata satu kali di luar event listener:

Kesimpulan

Menghitung jumlah kata dengan JavaScript adalah proses yang relatif sederhana berkat metode string seperti trim() dan split(). Dengan menambahkan event listener pada elemen input, kita dapat memberikan umpan balik real-time kepada pengguna tentang jumlah kata dalam teks yang mereka masukkan. Teknik ini berguna dalam berbagai aplikasi web di mana informasi tentang panjang teks diperlukan.