Javascript ile kelime sayıcı yapabilmemiz için öncelikle innertext ve textcontent ayrımını bilmemiz gerekiyor. Fazla uzatmadan aşağıdaki kodu da kullanabilirsiniz ancak yazının devamını okuyarak kodun nasıl oluştuğunu da anlayabilirsiniz. Javascript kelime sayıcı nasıl yapılır? Sorusunun cevabı birkaç satırlık koddan ibaret diyebilirim.
function leng(as) { let kelime = as.innerText.replace(/n/g, ' ').split(' ');
let sayac = 0;
kelime.forEach(k => {
if (k != '' && k != ' ' && k != null && k != 'n') {
sayac++;
}
})
return sayac;
}
Yukarıdaki kodu çalıştırmanız için yapmanız gereken tek şey leng() fonksiyonu içerisine let, var ya da const ile tanımladığınız bir değişkeni göndermektir.
var qll = document.querySelector('.ql-editor');
leng(qll)
Yukarıdaki gibi bir tanımlama yaparak istediğiniz öğenin içindeki içeriğin kelime sayısını alabilirsiniz. İnternet üzerindeki bir kelime sayıcı ile karşılaştırdığınızda size doğru sonucu verecektir. Bazen içerisine kod yazdığınızda rakamlar değişebiliyor ancak nasıl özelleştirilebileceğini başka bir başlıkta anlatacağım. Ben Javascript kelime sayıcı nasıl yapılır sorusuna cevabı kodları da dahil ederek verdim.
textContent ile innerText Arasındaki Fark
Javascript ile kelime sayıcı yaparken textContent yerine innerText kullanmamızın nedeni textContent ile aldığımız içeriğin alt satıra geçişleri anlayamaması ve üstteki satırın son kelimesi ile alttaki satırın ilk kelimesini birleştirmesidir.
Daha iyi anlaşılabilmesi için yukarıdaki örneği verdim. Text content ve inner text ile alınan yazının arasındaki fark yukarıda gördüğünüz gibidir. textContent ile akademi ve javascript yan yana gelirken innerText alt satıra geçilip geçilmediğini bize gösteriyor.
Alt satıra geçildiğini gösteriyor ancak biz kodda alt satıra geçildiğini nereden anlayacağız?
k != '' && k != ' '
Kodda bulunan bu bölüm kelime dizisini split ile boşluklardan ayırdıktan sonra giren kelimenin boş ya da boşluk olup olmadığını kontrol ediyor. Bu da alt satıra geçtiğimizde geçişi boşlukla yapabilirsek sorun çözülür demek. Alt satır ve üst satır birleştiğinde iki kelimenin tek kelime sayılma sorunu da ortadan kalkmış olacak.
innerText ile aldığımız içerikte alt satır n ile tanımlanıyor. Yani split ile yazıyı diziye çevirmeden önce içerikteki n kodunu boşluğa çevirirsek sorun ortadan kalkacaktır.
.replace(/n/g, ' ')
Yukarıdaki replace metodu da g yani global olarak tüm n işaretlerini boşluğa çeviriyor. Daha sonra split ile diziye çeviriyoruz. Sorunumuz da ortadan kalkmış oluyor. ReplaceAll da kullanılabilir tabii ki ancak daha eski ve tarayıcı uyumlu olduğundan g ile tanımlamak daha mantıklı olacaktır. Bu aşamadan sonra yaptığımız tek şey elimizdeki diziyi bir foreach döngüsüne sokarak şartımıza uyuyorsa fonksiyon içerisinde tanımlanmış bir sayaca bir eklemektir.
Eğer kodların kelimeden sayılmamasını istiyorsanız elinize gelen innerText içerisinde birkaç düzenleme yapabilirsiniz. Javascriptte bulunan contains ile <code, <link, <script gibi etiketleri bulup ardından bu etiketlerin kapanışlarını da bularak silip öyle hesaplayabilirsiniz. Ancak hiç tavsiye etmiyorum. Eğer kodlar kelimeden sayılmasaydı Google zaten indexlemezdi. Bu yöntemler aradaki boşluklar yerine direk elemanın kendisini bir kelime de hesaplayabilirsiniz. Kelime sayıcı bu haliyle kodlar haricinde gayet iyi bir şekilde çalışıyor. Önemli olan n işaretlerini tespit edip boşluk ile değiştirmemizdi. Yazı Editörü Nasıl Kodlanır? Html Editör Kodlama yazımı da ilginizi çektiyse incelemenizi tavsiye ederim.