how to make a word count in textarea using javascript

আসসালামু আলাইকুম। হাই বন্ধুরা কেমন আছেন আশা করি আল্লাহর রহমতে সবাই ভালো আছেন। বরাবরের মতো আজকেও আমি মোঃ সাজু আহমেদ আপনাদের মাঝে হাজির হলাম একটি ইন্টারেস্টিং টপিক নিয়ে। আজকের এই টপিকের মাধ্যমে আপনারা জানতে পারবেন ওয়ার্ড গণনা করার টুলস কিভাবে তৈরি করতে হয়।আপনারা যারা জানেন ব্লগে একটি ভালো মানের পোস্ট করতে হলে মিনিমাম 800 ওয়ার্ড থেকে 2500 ওয়ার্ড বা তার চেয়ে বেশি ওয়ার্ডের মধ্যে লিখতে হয়, কিন্তু আপনারা পোস্ট তো আর ওয়ার্ড গুনে গুনে লিখতে পারবেন না, বা পারলেই অনেক সময় এবং শ্রম দুটিই ব্যয় হবে।আমি অবশ্য জানি আপনারা এরকম ওয়ার্ড গুনে গুনে পোস্ট বা অন্য কোনো ডকুমেন্টস লিখেন না।কিন্তু যদি দরকার হয় বা জানতে চান আপনাদের কোনো পোস্টের বা ডকুমেন্টস এর মধ্যে কতটি ওয়ার্ড রয়েছে তাহলে আপনারা কি আংগুল ধরে ধরে ওয়ার্ড গণনা করবেন অবশ্য না, কারণ আপনারা বর্তমানে ইন্টারনেট মধ্যে অনেক টুলস পাবেন যেগুলো ব্যবহার করে আপনাদের ডকুমেন্টস এর ওয়ার্ড সংখ্যা জানতে পারবেন। আর এই পোস্টের মাধ্যমে আপনারা জানতে চলেছেন কিভাবে javascript, css,html দিয়ে কোনো ডকুমেন্টস এর মধ্যে কতটি ওয়ার্ড রয়েছে তা গণনা করার টুলস তৈরি করতে হয়। এতক্ষণ অনেক বক বক করে ফেললাম এখন আর সময় নষ্ট না করে তৈরি করে ফেলি ওয়ার্ড গণনা করার টুলস।

যেভাবে ওয়ার্ড গণনা করার টুলস তৈরি করবেন।

এই টুলস টিতে html এর মাধ্যমে স্ট্রাকচার দিয়েছি আর css এর মাধ্যমে সিম্পল ডিজাইন করেছি শেষে javascript এর মাধ্যমে বর্ণ এবং বাক্য গণনা করছি। নিচে আমরা html,css and javascript এর ব্যবহার ধাপে ধাপে বর্ণনা করব।

প্রথম ধাপঃ html এর ব্যবহার।

<textarea id="txt"></textarea> <button id="char">check character</button> <button id="word">check word</button>
উপরের কোডগুলো লক্ষ্য করুন এখানে প্রথম লাইনে একটি <textarea>....</textarea> নিয়েছি যাতে এখানে কোনো কিছু লিখতে পারেন অথবা অন্য কোনো ডকুমেন্ট কপি করে পেস্ট করতে পারেন এবং এর মধ্যে একটা id এট্রিবিউট নিয়েছি যার মান দিয়েছি txt যার ব্যবহার করব সিএসএস এবং জাভাস্ক্রিপ্টে। তারপর দুইটি <button>... </button> নিয়েছি, একটি বাটন দিয়ে বর্ণ সংখ্যা গণনা করব আর আরেকটি বাটন দিয়ে বাক্যের সংখ্যা গণনা করব। এবং প্রথম বাটনে একটি এট্রিবিউট id নিয়েছি যার মান দিয়েছি char, আবার দ্বিতীয় বাটনেও একটি এট্রিবিউট id নিয়েছি এবং তার মান দিয়েছি word। এই এট্রিবিউট গুলোর মাধ্যমে আমরা সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করব।

দ্বিতীয় ধাপঃ css এর ব্যবহার।

<style type="text/css"> textarea#txt{ outline:none; border-radius:5px; border:1px solid #FF9E00; resize:none; height:100px; width:270px; background:#C9E6FF; color:#FF004B; padding:10px; margin:20px 0px; } button#char , button#word{ border:none; outline:none; width:100px; height:40px; border-radius:5px; background:#29f; color:white; } </style>
আমি এখানে খুবই সাধারণ ডিজাইন করেছি আপনারা চাইলে আপনাদের মতো ডিজাইন করতে পারেন।

তৃতীয় ধাপঃ। javascript এর ব্যবহার।

<script> //character count... document.getElementById("char").addEventListener("click",function(){ var charCheck = document.getElementById("txt").value; var charlength = charCheck.length; document.getElementById("char").innerHTML=charlength; }); //word count... document.getElementById("word").addEventListener("click",function(){ var wordCount = 0; var wordCheck = document.getElementById("txt").value; for(i=0;i<wordCheck.length;i++){ if(wordCheck[i] === " ") { wordCount++;} } wordCount++; document.getElementById("word").innerHTML=wordCount; }); </script>
উপরের কোড গুলো লক্ষ করুন৷ [ওয়ার্ড এর জন্য] এখানে word নামক id যে এলিমেন্টে ব্যবহার করেছি সেই এলিমেন্টে যদি কেউ ক্লিক করে তাহলে addEventListener কাজ করবে, এবং তার মাধ্যমে একটি ফাংশন কাজ করবে, এবং তার মধ্যে একটি for loop চালিয়েছি আর এই for loop কাজ হল- প্রথমে txt নামক id যে এলিমেন্টে ব্যবহার করেছি তার কাছ থেকে value সংগ্রহ করা। এবং সেই value চেক করা যদি উক্ত value মধ্যে কোনো স্পেস ( ) থাকে তাহলে একটি ওয়ার্ড গণনা করবে। এভাবেই value এর মধ্যে তাকা প্রতিটি অক্ষর চেক করবে ফাংশনটি। আর যতটা স্পেস পাবে ততটা ওয়ার্ড গণনা করবে ।
মূলত এই লজিকটা ব্যবহার করে আমি ওয়ার্ড গণনা করার টুলস তৈরি করেছি। জাভাস্ক্রিপ্ট ব্যবহার করে আরও বিভিন্ন ভাবে ওয়ার্ড গণনা করার টুলস তৈরি করা যার, ত আপনাদের যদি এই লজিকটা ভালো লাগে তাহলে অবশ্যই বন্ধুদের সাথে শেয়ার করবেন ।

full source code <style type="text/css"> textarea#txt{ outline:none; border-radius:5px; border:1px solid #FF9E00; resize:none; height:100px; width:270px; background:#C9E6FF; color:#FF004B; padding:10px; margin:20px 0px; } button#char , button#word{ border:none; outline:none; width:100px; height:40px; border-radius:5px; background:#29f; color:white; } </style> <textarea id="txt"></textarea> <button id="char">check character</button> <button id="word">check word</button> <script> //character count... document.getElementById("char").addEventListener("click",function(){ var charCheck = document.getElementById("txt").value; var charlength = charCheck.length; document.getElementById("char").innerHTML=charlength; }); //word count... document.getElementById("word").addEventListener("click",function(){ var wordCount = 0; var wordCheck = document.getElementById("txt").value; for(i=0;i<wordCheck.length;i++){ if(wordCheck[i] === " ") { wordCount++;} } wordCount++; document.getElementById("word").innerHTML=wordCount; }); </script>

ত আজকের টপিক এখানে শেষ করছি, জানি না আপনাদের বুঝাতে পারলাম কি পারলামনা তার পরও যদি ভালো লাগে তাহলে অবশ্যই কমেন্টে জানাবেন। জানি মানুষ বলতেই ভুল তাই আমারও ভুল ত্রুটি হতে পারে, আপনারা যদি কোনো ভুল ত্রুটি লক্ষ করেন তাহলে অবশ্যই ক্ষমার দৃষ্টিতে দেখবেন।