تحديد النص بين اي رقمين وتلوينه عند مرور الفارة فوقه، هل من طريقة؟

وعليكم السلام،

يمكنك المحايلة قليلا لتحقيق ذلك، قم بالاستماع لحدث مرور مؤشر الفأرة فوق أي عنصر فقرة على النحو التالي:

let texts = document.querySelectorAll('.paragraph')
texts.forEach(t => {
   t.addEventListener('mouseover', () => {
       var r = document.createRange();  
       r.selectNodeContents(t);  
       var sel=window.getSelection(); 
       sel.removeAllRanges(); 
       sel.addRange(r); 
   })
})

في حين تكون هيكلة HTML على النحو التالي:

<p class="paragraph"> 
هاته الفقرة الأولى
</p>

<p class="paragraph"> 
هاته الفقرة الثانية
</p>

النتيجة: سيتم تحديد المحتوى النصي لكل من عنصري p بمجرد تمرير مؤشر الفأرة على أي منهما.

من الأفضل توفير النص الذي تريد تغييره، حيث أنه يتعين المرور على النص من خلال جافاسكريبت وإضافة كلاس محدد للنص بين الأرقام وتغليفه بعنصر span مثلاً ويجب معرفة شكل الأرقام هل هي أرقام إنجليزية مثل 123 أم unicode.

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

الحل يكمن في ادراج تقسيمات النصوص التي تريد ضمن عنصر HTML معين، مثل <span></span> ومن ثم تحديد هذا العنصر وتغيير لونه عند مرور مؤشر الفأرة عليه.

ان كان هذا متوفرا، فالأمر يصبح بسيطا:

var elements = document.querySelectorAll('span')
elements.forEach(element => {
  element.addEventListener('mouseover', () => {
      element.style.color = "red" // اللون الذي تريد
  })
})

ان لم يكن هذه متوفرا، فعليك أن تقسم النص الخاص بك أولا، وثم تنفيذ الكود السابق.

لتقسيم النص الخاص بك، يمكنك تمريره الى دالة تستخدم ال regular expressions كهذه:

function divideText(text) {
      var parts = text.split(/(\d+)/).filter(Boolean);
      var spans = parts.map((part, index) => {
        if (index % 2 === 0) {
          return `<span>${part}</span>`;
        } else {
          return `<span class="between-numbers">${part}</span>`;
        }
      });
      return spans.join('');
}

ال text هو النص الخاص بك، ونتيجة الدالة يمكن تخزينها وعرضها لرؤية النص مقسما ضمن مجموعة span.