شرح بالعربي لتطبيق عد الأحرف والفواصل و الكلمات في نص ما بلغة JavaScript

كما وعدتكم سابقا باني ساشرح بلغة جافاسكريبت تطبيقات متدرجة الصعوبة من السهلة حتي المتقدمة. 

و نبدأ اليوم بتطبيق بسيط لحساب عدد الكلمات، الأحرف، والفواصل في نص معين.

يتكون الكود من عناصر HTML وجافاسكريبت.

عناصر HTML الموجود في المشروع 

textarea : عنصر إدخال النص حيث يقوم المستخدم بكتابة النص.

button : زر يقوم المستخدم بالضغط عليه لبدء عملية العد.

div : يحتوي على حقول لإظهار عدد الكلمات، الأحرف، والفواصل.

<textarea id="textInput"></textarea>

<button id="countButton">عد النص</button>

<div class="count-container">

  <div class="count-label">

    <label>عدد الكلمات:</label>

    <input class="count-input" disabled="" id="wordCount" type="text" />

  </div>

  <div class="count-label">

    <label>عدد الأحرف:</label>

    <input class="count-input" disabled="" id="charCount" type="text" />

  </div>

  <div class="count-label">

    <label>عدد الفواصل:</label>

    <input class="count-input" disabled="" id="punctuationCount" type="text" />

  </div>

</div>

عناصر جافاسكريبت الموجودة في المشروع

الكود بلغة بجافاسكريبت هو ما يقوم بتنفيذ وعرض النتائج.

var countButton = document.getElementById('countButton');

countButton.addEventListener('click', function() {

  var textInput = document.getElementById('textInput').value;

  textInput = textInput.trim();

  

  // حساب عدد الكلمات

  var words = textInput.split(/\s+/);

  words = words.filter(function(word) {

    return word.trim() !== "";

  });

  var wordCount = words.length;

  

  // حساب عدد الأحرف

  var charCount = textInput.length;

  

  // حساب عدد الفواصل

  var punctuationCount = (textInput.match(/[.,\/#!$%\^&\*;:{}=\-_~()]/g) || []).length;

  

  // عرض النتائج

  document.getElementById('wordCount').value = wordCount;

  document.getElementById('charCount').value = charCount;

  document.getElementById('punctuationCount').value = punctuationCount;

});

شرح الجافاسكريبت خطوة بخطوة

الكود المكتوب بلغة جافاسكريبت يقوم بحساب عدد الكلمات و الأحرف والفواصل في نص ما. و إليكم شرحا بالتفصيل:

جلب زر العد

نقوم بجلب الزر الذي سيضغط عليه المستخدم لبدء عملية العد.

var countButton = document.getElementById('countButton');

 document.getElementById('countButton'):

 الكود يبحث عن عنصر في صفحة HTML لديه id يساوي 'countButton'  وهو الزر الذي نستخدمه للعد.

اضافة مستمع الحدث

نضيف مستمع الحدث إلى الزر بحيث عندما يتم الضغط عليه يقوم بتنفيذ الوظيفة المطلوبة.

countButton.addEventListener('click', function() {

addEventListener('click', function() { ... }):

 يتم استدعاء الكود الموجود داخل function عند الضغط على الزر.

التعديل علي النص

نجلب النص من عنصر textarea ونزيل الفراغات و نظهر النتائج.

var textInput = document.getElementById('textInput').value;

textInput = textInput.trim();

 document.getElementById('textInput').value:

 الكود يبحث عن عنصر textarea في صفحة HTML لديه id يساوي 'textInput' وتأخذ النص المدخل.

textInput.trim(): لازالة الفراغات الزائدة في النص.

لحساب عدد الكلمات

نقوم بتقسيم النص إلى كلمات باستخدام الفراغات بينها كفاصل، ونحسب عدد الكلمات.

var words = textInput.split(/\s+/);

words = words.filter(function(word) {

  return word.trim() !== "";

});

var wordCount = words.length;

textInput.split(/\s+/): 

نستخدمه لتقسم النص إلى أجزاء باستخدام الفراغات كفاصل و من ثم يتكون مصفوفة (راجع regular expression).

 words.filter(function(word) { ... }):

 لازالة العناصر في المصفوفة - التي تكونت من الكود السابق - التي تحتوي على فراغات فقط.

words.length:

 لعدد العناصر في المصفوفة، وهو عدد الكلمات.

لحساب عدد الحروف

نحسب عددها في النص بعد إزالة الفراغات الزائدة.

var charCount = textInput.length;

textInput.length: 

هذه الوظيفة تعطي عدد الأحرف في النص.

حساب عدد الفواصل

نستخدم regexor لايجاد الفواصل في النص ثم نحصيها عددا.

var punctuationCount = (textInput.match(/[.,\/#!$%\^&\*;:{}=\-_~()]/g) || []).length;

textInput.match(/[.,\/#!$%\^&\*;:{}=\-_~()]/g): 

 تبحث في النص عن أي من الفواصل المحددة المحتمل تواجها في النص في التعبير المنتظم وتعطي مصفوفة من ما يطابقها.

 || []: 

هذا الجزء يعني أنه إذا لم يتم العثور على أي فواصل (وبالتالي match تعطي null)، يتم استخدام مصفوفة فارغة بدلاً من ذلك.

.length:

 لمعرفة عدد العناصر في المصفوفة، وهو عدد الفواصل.

عرض النتائج

نقوم بتحديث القيم لعرض النتائج.

document.getElementById('wordCount').value = wordCount;

document.getElementById('charCount').value = charCount;

document.getElementById('punctuationCount').value = punctuationCount;

document.getElementById('wordCount').value = wordCount;: 

للبحث عن عنصر لديه id يساوي 'wordCount' وتحديث قيمته بعدد الكلمات.

document.getElementById('charCount').value = charCount;: 

للبحث عن عنصر  لديه id يساوي 'charCount' وتحديث قيمته بعدد الأحرف.

 document.getElementById('punctuationCount').value = punctuationCount;:

 للبحث عن عنصر  لديه id يساوي 'punctuationCount' وتحديث قيمته بعدد الفواصل.

الكود الكامل مرة أخرى مع التعليقات:

var countButton = document.getElementById('countButton'); // جلب زر العد

countButton.addEventListener('click', function() { // إضافة مستمع للأحداث عند الضغط على الزر

  var textInput = document.getElementById('textInput').value; // قراءة النص المدخل

  textInput = textInput.trim(); // إزالة الفراغات الزائدة في البداية والنهاية

  

  // حساب عدد الكلمات

  var words = textInput.split(/\s+/); // تقسيم النص إلى كلمات باستخدام الفراغات كفاصل

  words = words.filter(function(word) { // إزالة الكلمات الفارغة

    return word.trim() !== "";

  });

  var wordCount = words.length; // حساب عدد الكلمات

  

  // حساب عدد الأحرف

  var charCount = textInput.length; // حساب عدد الأحرف في النص

  

  // حساب عدد الفواصل

  var punctuationCount = (textInput.match(/[.,\/#!$%\^&\*;:{}=\-_~()]/g) || []).length; // حساب عدد الفواصل

  

  // عرض النتائج

  document.getElementById('wordCount').value = wordCount; // تحديث عدد الكلمات

  document.getElementById('charCount').value = charCount; // تحديث عدد الأحرف

  document.getElementById('punctuationCount').value = punctuationCount; // تحديث عدد الفواصل

});

بهذا الشرح التفصيلي، يمكن حتى للمبتدئين فهم كيفية عمل هذا الكود خطوة بخطوة.

يمكنك التعرف علي النتيجة من اداة تحليل وعد الكلمات والاحرف