Bir text alana girilen metnin kaç kelimeden oluştuğunu JavaScript ile nasıl bulabiliriz. JavaScript kullanmamızın avantajı, kullanıcı metni yazarken aynı anda kelime sayısını bularak ekranda gösterebiliriz.
İlk olarak kelimeleri neye göre ayıracağız. Türkçede kelimeler birbirinden boşlukla ayrılır. Noktalama işaretleri kullanıldıktan sonra bir boşluk bırakılır. Birinci yöntemde kullanıcılarımızın bu kurala uyduğunu farz edelim.
Sayfamızda head tagları arasına aşağıdaki JavaScript kodlarını yazalım
<script language="javascript" type="text/javascript"> function KelimeSayisiBul() { var a = document.getElementById('Metin1').value; var kelimeler = new Array(); kelimeler = a.split(' '); var cnt = kelimeler.length; document.getElementById('kelimeSayisiLabel').innerHTML = cnt; } script> |
Sayfamızda body tagları arasına da aşağıdaki gibi bir text alan ve label eklersek, text alanın keyup olayında da yukarıda tanımladığımız KelimeSayisiBul fonksiyonunu çağırırsak text alana yazdığımız cümlenin kaç adet kelimeden oluştuğunu anında labelda görebiliriz.
<table> <tr> <td> <input id="Metin1" onkeyup="KelimeSayisiBul();" type="text" /> td> <td> Kelime Sayısı: <label id="kelimeSayisiLabel">0label> td> tr> table> |
Peki, yukarıdaki örnekte eksikler nelerdir.
İlk olarak noktalama işaretlerinden sonra boşluk bırakılmadığında ve kelimeler arasında birden fazla boşluk bırakıldığında yukarıdaki yapı hatalı çalışır. İlk olarak noktalama işaretlerini bularak bunları boşluğa çevirelim sonrasında cümlemizi yukarıdaki örnekte olduğu gibi boşluklara göre ayıralım edelim. Eğer kelimeler arasında birden fazla boşluk bırakıldı ise boşluğa göre ayırma yaptığımızda oluşan dizinin bazı elemanlarının boş olduğunu görürüz. Öyleyse bu kontrolü de yaparsak cümlemizin tam olarak kaç kelimden oluştuğunu görebiliriz.
Yukarıdaki ifadelere göre JavaScript kodumuzu aşağıdaki gibi değiştirmemiz yetecektir.
<script language="javascript" type="text/javascript"> function KelimeSayisiBul2() { var a = document.getElementById('Metin2').value; a = a.replace(/[,.?!;:]/gi, ' ');
document.getElementById('kelimeSayisiLabel2').innerHTML = a; var kelimeler = new Array(); kelimeler = a.split(' '); var l = 0; var cnt = 0; while (l < kelimeler.length) { if (kelimeler[l] != '') cnt++; l++; } document.getElementById('kelimeSayisiLabel2').innerHTML = cnt; } script> |
Yukarıda bahsettiğimiz iki yöntemi de barındıran html ve JavaScript kodları :
<html > <head> <title>Untitled Pagetitle>
<script language="javascript" type="text/javascript"> function KelimeSayisiBul() { var a = document.getElementById('Metin1').value; var kelimeler = new Array(); kelimeler = a.split(' '); var cnt = kelimeler.length; document.getElementById('kelimeSayisiLabel').innerHTML = cnt; } script>
<script language="javascript" type="text/javascript"> function KelimeSayisiBul2() { var a = document.getElementById('Metin2').value; a = a.replace(/[,.?!;:]/gi, ' ');
document.getElementById('kelimeSayisiLabel2').innerHTML = a; var kelimeler = new Array(); kelimeler = a.split(' '); var l = 0; var cnt = 0; while (l < kelimeler.length) { if (kelimeler[l] != '') cnt++; l++; } document.getElementById('kelimeSayisiLabel2').innerHTML = cnt; } script>
head> <body> <table> <tr> <td colspan="2"> Sadece Boşluğa göre kelime sayımı: td> tr> <tr> <td> <input id="Metin1" onkeyup="KelimeSayisiBul();" type="text" /> td> <td> Kelime Sayısı: <label id="kelimeSayisiLabel"> 0label> td> tr> <tr> <td colspan="2"> <hr style="color: Red">hr> td> tr> <tr> <td colspan="2"> Boşluk ve Noktalama işaretlerine göre kelime sayımı(Birden fazla boşluk kontrolü yapar) td> tr> <tr> <td> <input id="Metin2" onkeyup="KelimeSayisiBul2();" type="text" /> td> <td> Kelime Sayısı: <label id="kelimeSayisiLabel2"> 0label> td> tr> table> body> html> |