تحديز تطابقات التعبيرات العادية في JavaScript: دليل عملي

في سعيك لتحقيق تحديز تطابقات التعبيرات العادية في الوقت الحقيقي باستخدام JavaScript، يظهر أنك تسعى إلى إنشاء تأثير مشابه لمواقع مثل regexr.com. لتحقيق هذا الهدف، يمكنك اتباع خطوات تساعدك في فهم كيفية تحديد تطابقات التعبيرات العادية في الوقت الفعلي.

أولاً وقبل كل شيء، يجب عليك أن تعرف أن JavaScript يوفر لك كائنًا يسمى RegExp للتعامل مع تعبيرات البحث. يمكنك استخدام هذا الكائن لإنشاء تعبير عادي من نص يُدخله المستخدم. على سبيل المثال، يمكنك تعديل الكود الحالي كما يلي:

javascriptCopy code
function highlight() {
    var pattern = document.getElementById('needle').value; // احصل على نص التعبير من الحقل
    var haystack = document.getElementById('haystack');
    
    var regex = new RegExp(pattern, 'g'); // قم بإنشاء تعبير عادي

    haystack.innerHTML = haystack.innerHTML.replace(regex, "$&");
}

ثم يمكنك أن تستخدم CSS لتعيين تنسيق للنص المحدد:

cssCopy code
.highlight {
    background-color: yellow; // قم بتعيين اللون الذي تريده هنا
}

إذا كنت ترغب في تحديد التطابقات في الوقت الحقيقي، يمكنك إضافة الأحداث input أو keyup إلى حقل الإدخال لتحديث التحديد بمجرد إدخال المستخدم لتعديلات. على سبيل المثال:

htmlCopy code
<input id="needle" oninput="highlight()" type="text" placeholder="Enter Pattern" autofocus>

يتيح لك هذا الكود تحديد تطابقات التعبيرات العادية في الوقت الحقيقي عند إدخال المستخدم لنص في حقل البحث. يُفضل دائمًا إضافة التعليقات لجعل الكود أكثر فهمًا للمطورين الآخرين ولنفسك.

بالتأكيد، يمكننا توسيع الموضوع بمزيد من المعلومات حول تحديد تطابقات التعبيرات العادية في الوقت الحقيقي باستخدام JavaScript. لنقم بتوضيح بعض النقاط المهمة:

استخدام الكلاس وCSS:

لتحديد التطابقات، استخدمنا span مع كلاس “highlight” وقمنا بتعيين خلفية ملونة باستخدام CSS. يمكنك تخصيص الأنماط والألوان حسب احتياجاتك.

cssCopy code
.highlight {
    background-color: yellow; /* يمكن تعديل لون التحديد هنا */
}

استخدام الحدث input:

استخدمنا حدث input بدلاً من keyup لتحديث التحديد على الفور مع أي تغيير في حقل الإدخال.

htmlCopy code
<input id="needle" oninput="highlight()" type="text" placeholder="Enter Pattern" autofocus>

التعامل مع الجداول والعناصر النصية:

تأكد من أن الكود يتعامل بشكل صحيح مع عناصر HTML المختلفة، مثل الفقرة (

) والنموذج (

javascriptCopy code
var haystack = document.getElementById('haystack');
haystack.innerHTML = haystack.innerHTML.replace(regex, "$&");

javascriptCopy code
var regex = new RegExp(pattern, 'gi');

javascriptCopy code
// استخدم الحدث input لتحديث التحديد على الفور
function highlight() {
    // احصل على نص التعبير من حقل الإدخال
    var pattern = document.getElementById('needle').value;
    
    // احصل على عنصر الهدف (حيث سيتم التحديد)
    var haystack = document.getElementById('haystack');
    
    // قم بإنشاء تعبير عادي مع حساسية للحالة
    var regex = new RegExp(pattern, 'gi');

    // قم بتحديد التطابقات باستخدام span مع الكلاس 'highlight'
    haystack.innerHTML = haystack.innerHTML.replace(regex, "$&");
}