تحديز تطابقات التعبيرات العادية في JavaScript: دليل عملي
في سعيك لتحقيق تحديز تطابقات التعبيرات العادية في الوقت الحقيقي باستخدام JavaScript، يظهر أنك تسعى إلى إنشاء تأثير مشابه لمواقع مثل regexr.com. لتحقيق هذا الهدف، يمكنك اتباع خطوات تساعدك في فهم كيفية تحديد تطابقات التعبيرات العادية في الوقت الفعلي.
أولاً وقبل كل شيء، يجب عليك أن تعرف أن JavaScript يوفر لك كائنًا يسمى RegExp
للتعامل مع تعبيرات البحث. يمكنك استخدام هذا الكائن لإنشاء تعبير عادي من نص يُدخله المستخدم. على سبيل المثال، يمكنك تعديل الكود الحالي كما يلي:
-
كيفية ضغط مجلد في نظام Linux05/03/2024
-
حساب محدد القيمة لمصفوفة 2×208/04/2024
-
تحسين الأداء باستخدام jQuery02/03/2024
javascriptfunction 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 لتعيين تنسيق للنص المحدد:
css.highlight {
background-color: yellow; // قم بتعيين اللون الذي تريده هنا
}
إذا كنت ترغب في تحديد التطابقات في الوقت الحقيقي، يمكنك إضافة الأحداث input
أو keyup
إلى حقل الإدخال لتحديث التحديد بمجرد إدخال المستخدم لتعديلات. على سبيل المثال:
html<input id="needle" oninput="highlight()" type="text" placeholder="Enter Pattern" autofocus>
يتيح لك هذا الكود تحديد تطابقات التعبيرات العادية في الوقت الحقيقي عند إدخال المستخدم لنص في حقل البحث. يُفضل دائمًا إضافة التعليقات لجعل الكود أكثر فهمًا للمطورين الآخرين ولنفسك.
المزيد من المعلومات
بالتأكيد، يمكننا توسيع الموضوع بمزيد من المعلومات حول تحديد تطابقات التعبيرات العادية في الوقت الحقيقي باستخدام JavaScript. لنقم بتوضيح بعض النقاط المهمة:
استخدام الكلاس وCSS:
لتحديد التطابقات، استخدمنا span
مع كلاس “highlight” وقمنا بتعيين خلفية ملونة باستخدام CSS. يمكنك تخصيص الأنماط والألوان حسب احتياجاتك.
css.highlight {
background-color: yellow; /* يمكن تعديل لون التحديد هنا */
}
استخدام الحدث input
:
استخدمنا حدث input
بدلاً من keyup
لتحديث التحديد على الفور مع أي تغيير في حقل الإدخال.
html<input id="needle" oninput="highlight()" type="text" placeholder="Enter Pattern" autofocus>
التعامل مع الجداول والعناصر النصية:
تأكد من أن الكود يتعامل بشكل صحيح مع عناصر HTML المختلفة، مثل الفقرة (
) والنموذج (