بالأمس، واجهت مشكلة مطابقة تعبيرين عاديين عند القيام بدمج CSS، واستغرق الأمر أيضًا الكثير من الوقت، وبمساعدة زملاء CE في CSS Forest Group، أكملت هذين التعبيرين العاديين وقد قمت بتسجيلهما خصيصًا استخدامها في المستقبل تصل.
المشكلة الأولى هي مشكلة مطابقة مسارات الصور. السلسلة المراد معالجتها هي:
وفيما يلي المحتوى المقتبس: |
ما كتبته في الأصل هو:
وفيما يلي المحتوى المقتبس: |
والنتيجة هي:
وفيما يلي المحتوى المقتبس: |
كما ترى فإن نتيجة مطابقة صورتين في صورة واحدة ليست كما توقعت. قم بتغييره إلى المطابقة البطيئة كما يلي:
وفيما يلي المحتوى المقتبس: |
والنتيجة هي:
وفيما يلي المحتوى المقتبس: url(demo.jpg); |
وتمت مطابقة صورتين، وهي النتيجة المرجوة. :)
المشكلة الثانية هي استخدام المتغيرات في التعبيرات العادية. دعنا نشرح بإيجاز لماذا يمكن أن تكون إضافة المتغيرات مشكلة أيضًا. دعونا نلقي نظرة أولاً على وصف كائن RegExp والطريقة العامة لكتابة تعبيرات Javascript العادية :
وفيما يلي المحتوى المقتبس: |
سيتم التعامل مع كل المحتوى الموجود بين "/" كتعبير عادي، لذلك سيتم التعامل مع اسم المتغير كسلسلة. بدون إضافة "/"؟ لا بأس بذلك، ولكن إذا لم تقم بإضافة "/"، فلن تتمكن من تحديد وضع المطابقة، ويمكنك فقط مطابقة الوضع الأول.
وفيما يلي المحتوى المقتبس: يمكن إنشاء كائن RegExp جديد من خلال كائن RegExp، باستخدام الوضع والإشارات المحددة. |
ثم:
وفيما يلي المحتوى المقتبس:
|
ما يجب ملاحظته هنا هو استخدام "\" للهروب، لأن
وفيما يلي المحتوى المقتبس: إذا كان نمط الوسيطة عبارة عن تعبير عادي وليس سلسلة، فسيقوم مُنشئ RegExp() بإنشاء كائن RegExp جديد بنفس النمط والإشارات مثل RegExp المحدد. |
خلال هذه العملية سيتم تحويل "\" إلى ""، أي أن النتيجة أعلاه هي:
وفيما يلي المحتوى المقتبس:
|