التناوب (أو) |
نريد أن نتيح هذا المشروع المفتوح المصدر إلى كل الناس حول العالم. من فضلك ساعدنا على ترجمة محتوى هذه السلسله للغة التى تعرفها.
خريطة الدورة التعليمية
  1. الدورة التعليمية
  2. Regular expressions
٢٥ مارس ٢٠٢١

التناوب (أو) |

البديل هو المصطلح في التعبير العادي وهو في الواقع “OR” بسيط.

في التعبير العادي ، يُشار إليه بحرف السطر العمودي |.

على سبيل المثال ، نحتاج إلى العثور على لغات البرمجة: HTML أو PHP أو Java أو JavaScript.

التعبير العادي المقابل: html | php | java (script)؟.

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

let regexp = /html|php|css|java(script)?/gi;

let str = 'First HTML appeared, then CSS, then JavaScript';

alert(str.match(regexp)); // 'HTML', 'CSS', 'JavaScript'

لقد رأينا بالفعل شيئًا مشابهًا – الأقواس المربعة. تسمح بالاختيار بين عدة أحرف ، على سبيل المثال gr [ae] y يطابق gre أو grey.

Square brackets allow only characters or character classes. Alternation allows any expressions. A regexp A|B|C means one of expressions A, B or C.

على سبيل المثال:

  • gr (a | e) y يعني تمامًا مثل gr [ae] y.
  • gra | ey تعني gra أو ey.

لتطبيق التناوب على جزء مختار من النمط ، يمكننا تضمينه بين قوسين:

  • النمط: أحب HTML | CSS يطابقمطابقة: أنا أحب HTML أو تطابق: CSS.
  • I love (HTML | CSS) يتطابق مع I love HTML أو I love CSS.

مثال: regexp للوقت

In previous articles there was a task to build a regexp for searching time in the form hh:mm, for instance 12:00. But a simple \d\d:\d\d is too vague. It accepts 25:99 as the time (as 99 minutes match the pattern, but that time is invalid).

كيف يمكننا صنع نمط أفضل؟

يمكننا استخدام مطابقة أكثر دقة. اولا الساعات:

  • إذا كان الرقم الأول هو “0” أو “1” ØŒ فيمكن أن يكون الرقم التالي أي: [01] \ d.
  • وإلا ØŒ إذا كان الرقم الأول هو “2” ØŒ فيجب أن يكون الرقم التالي "pattern: [0-3]`.
  • (غير مسموح بالرقم الأول الآخر)

يمكننا كتابة كلا المتغيرين في regexp باستخدام البديل: [01] \ d | 2 [0-3].

بعد ذلك ، يجب أن تكون الدقائق من 00 إلى59. في لغة التعبير العادي التي يمكن كتابتها كـ [0-5] \ d: الرقم الأول0-5 ، ثم أي رقم.

If we glue hours and minutes together, we get the pattern: [01]\d|2[0-3]:[0-5]\d.

لقد انتهينا تقريبًا ، ولكن هناك مشكلة. يحدث “النمط البديل”: | الآن بين النمط: [01] \ dو "النمط: 2 [0-3]: [0-5] \ d.

أي: تمت إضافة الدقائق إلى البديل الثاني ، إليك صورة واضحة:

[01] \ d | 2 [0-3]: [0-5] \ د

يبحث هذا النمط عن النمط: [01] \ d أوالنمط: 2 [0-3]: [0-5] \ d.

ولكن هذا خطأ ، يجب استخدام التناوب فقط في جزء “الساعات” من التعبير العادي ، للسماح بـ "pattern: [01] \ dOR pattern: 2 [0-3] . دعنا نصحح ذلك عن طريق وضع "ساعات" بين قوسين:النمط: ([01] \ d | 2 [0-3]): [0-5] \ d`.

الحل النهائي:

let regexp = /([01]\d|2[0-3]):[0-5]\d/g;

alert('00:00 10:10 23:59 25:99 1:2'.match(regexp)); // 00:00,10:10,23:59

مهمه

البحث عن لغات البرمجة

هناك العديد من لغات البرمجة ، مثل Java و JavaScript و PHP و C و C ++.

أنشئ التعبير العادي الذي يعثر عليه في السلسلة الموضوع: Java JavaScript PHP C ++ C:

let regexp = /your regexp/g;

alert("Java JavaScript PHP C++ C".match(regexp)); // Java JavaScript PHP C++ C

يمكن أن تكون الفكرة الأولى هي سرد اللغات التي يوجد بها “|” في الوسط.

لكن هذا لا يعمل بشكل صحيح:

let regexp = /Java|JavaScript|PHP|C|C\+\+/g;

let str = "Java, JavaScript, PHP, C, C++";

alert( str.match(regexp) ); // Java,Java,PHP,C,C

يبحث محرك التعبير العادي عن البدائل واحدة تلو الأخرى. هذا هو: أولاً يتحقق مما إذا كان لدينا Java ، وإلا – يبحث عن JavaScript وما إلى ذلك.

ونتيجة لذلك ، لا يمكن العثور على JavaScript مطلقًا ، فقط لأنه يتم تحديد Java أولاً.

نفس الشيء مع C و C ++.

هناك حلان لهذه المشكلة:

  1. قم بتغيير الترتيب للتحقق من المطابقة الأطول أولاً: JavaScript | Java | C \ + \ + | C | PHP.
  2. دمج المتغيرات بنفس البداية: Java (Script)؟ | C (\ + \ +)؟ | PHP.

بشكل عملي:

let regexp = /Java(Script)?|C(\+\+)?|PHP/g;

let str = "Java, JavaScript, PHP, C, C++";

alert( str.match(regexp) ); // Java,JavaScript,PHP,C,C++

البحث عن أزواج bbtag

تبدو علامة “bb-tag” مثل [tag] ... [/ tag] ، حيث tag هي واحدة من:b أو url أوquote.

على سبيل المثال:

[b]text[/b]
[url]http://google.com[/url]

يمكن أن تتداخل علامات BB. ولكن لا يمكن إدراج علامة في نفسها ، على سبيل المثال:

بشكل طبيعي:
[url] [b]http://google.com[/b] [/url]
[quote] [b]text[/b] [/quote]

لا يمكن حدوثه:
[b][b]text[/b][/b]

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

[quote]
  [b]text[/b]
[/quote]

قم بإنشاء التعبير العادي للعثور على جميع علامات BB مع محتوياتها. على سبيل المثال:

let regexp = /your regexp/flags;

let str = "..[url]http://google.com[/url]..";
alert( str.match(regexp) ); // [url]http://google.com[/url]

إذا كانت العلامات متداخلة ، فإننا نحتاج إلى العلامة الخارجية (إذا أردنا ، يمكننا متابعة البحث في محتواها):

let regexp = /your regexp/flags;

let str = "..[url][b]http://google.com[/b][/url]..";
alert( str.match(regexp) ); // [url][b]http://google.com[/b][/url]

علامة الفتح هي النمط: \ [(b | url | الاقتباس) \].

ثم للعثور على كل شيء حتى علامة الإغلاق – دعنا نستخدم النمط . *؟ مع العلامة s لمطابقة أي حرف بما في ذلك السطر الجديد ثم إضافة مرجع خلفي إلى علامة الإغلاق.

النمط الكامل: \ [(b | url | الاقتباس) \]. *؟ \ [/ \ 1 \].

بشكل عملي:

let regexp = /\[(b|url|quote)\].*?\[\/\1\]/gs;

let str = `
  [b]hello![/b]
  [quote]
    [url]http://google.com[/url]
  [/quote]
`;

alert( str.match(regexp) ); // [b]hello![/b],[quote][url]http://google.com[/url][/quote]

يرجى ملاحظة أنه بالإضافة إلى الهروب من نمط: [ و نقش:] ، كان علينا أن نهرب من شرطة مائلة لنموذج علامة الإغلاق: [\ / \ 1] `، لأن الخط المائل يغلق النمط عادةً.

البحث عن سلاسل الاقتباس

قم بإنشاء regexp للعثور على سلاسل في علامات اقتباس مزدوجة الموضوع:" ... ".

يجب أن تدعم السلاسل الهروب ، بنفس الطريقة التي تدعمها سلاسل JavaScript. على سبيل المثال ، يمكن إدراج علامات الاقتباس كـ \"سطر جديد مثل \ n ، والشرطة نفسها كـ \\.

let str = "Just like \"here\".";

يرجى ملاحظة ، على وجه الخصوص ، أن الاقتباس الهارب موضوع: \"لا ينهي سلسلة.

لذلك يجب علينا البحث من اقتباس واحد إلى الآخر تجاهل علامات الاقتباس الهاربة على الطريق.

هذا هو الجزء الأساسي من المهمة ، وإلا سيكون تافها.

أمثلة على السلاسل المراد مطابقتها:

.. "test me" ..
.. "Say \"Hello\"!" ... (escaped quotes inside)
.. "\\" ..  (double slash inside)
.. "\\ \"" ..  (double slash and an escaped quote inside)

في جافا سكريبت ، نحتاج إلى مضاعفة الخطوط المائلة لتمريرها مباشرة في السلسلة ، مثل هذا:

let str = ' .. "test me" .. "Say \\"Hello\\"!" .. "\\\\ \\"" .. ';

// the in-memory string
alert(str); //  .. "test me" .. "Say \"Hello\"!" .. "\\ \"" ..

الحل: /" (\\. | [^ "\\]) *" / g.

خطوة بخطوة:

  • First we look for an opening quote "
  • Then if we have a backslash \\ (we have to double it in the pattern because it is a special character), then any character is fine after it (a dot).
  • Otherwise we take any character except a quote (that would mean the end of the string) and a backslash (to prevent lonely backslashes, the backslash is only used with some other symbol after it): [^"\\]
  • …And so on till the closing quote.

بشكل:

let regexp = /"(\\.|[^"\\])*"/g;
let str = ' .. "test me" .. "Say \\"Hello\\"!" .. "\\\\ \\"" .. ';

alert(str.match(regexp)); // "test me","Say \"Hello\"!","\\ \""

البحث عن العلامة الكاملة

اكتب regexp للعثور على العلامة <style ...>. يجب أن تتطابق مع العلامة الكاملة: قد لا تحتوي على سمات <style> أو تحتوي على العديد منها <style type =" ... "id =" ... ">.

… لكن التعبير العادي يجب ألا يطابق <styler>!

على سبيل المثال:

let regexp = /your regexp/g;

alert( '<style> <styler> <style test="...">'.match(regexp) ); // <style>, <style test="...">

بداية النمط واضحة: <style.

… ولكن بعد ذلك لا يمكننا ببساطة كتابة <style. *؟> ، لأن <styler> ستطابقها.

نحتاج إلى مسافة بعد <style ثم اختياريًا شيء آخر أوmatch:>` النهائي.

في لغة regexp: <style (> | \ s. *؟>).

بشكل عملي:

let regexp = /<style(>|\s.*?>)/g;

alert( '<style> <styler> <style test="...">'.match(regexp) ); // <style>, <style test="...">
الدرس السابقالدرس التالي
خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ØŒ وللكثير من السطور استخدم <pre>ØŒ ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)

فصل

التنقل في الدرس

مشاركه
عدِّل فى جيتهاب