كيف يمكن عمل اداه في لغة JavaScript

السؤال غير واضح ما هي الطريقة الغير المعتادة؟ فالمثال الموضح هو كود CSS عادي.

بتاريخ 14 دقائق مضت قال Mustafa Suleiman:

السؤال غير واضح ما هي الطريقة الغير المعتادة؟ فالمثال الموضح هو كود CSS عادي.

اقصد ب الطريقة الغير معتادة في ضغط اكواد css  

هي إزالة  المسافات الزائدة  في الكود و ترك الاسطر مثل المثال السابق 

و اما الطريقة المعتادة هي إزالة جميع المسافات و الاسطر.

تلك ليست طريقة ضغط بل format أي تنسيق للكود، وحاليًا توجد أدوات كثيرة تفعل ذلك،  مثل أداة Prettier. 

إذا كنت تريد برمجة أداة مثل ذلك فإن هذا الأمر متقدم وليس بالسهل تنفيذه .

يمكنك البحث على يوتيوب أو على الإنترنت عموما عن فكرة tokenizer و parser .

حيث يقوم ال Tokenizer أولا بفصل الكلمات بناءا على القواعد التي تقدمها له حيث يقوم بتحليل سلسلة النص إلى وحدات صغيرة تسمى tokens. يمكن أن تكون هذه الوحدات الفرعية كلمات، أو رموز ترقيمية، أو علامات ترقيم، وما إلى ذلك. عملية التقسيم يمكن أن تعتمد على مجموعة متنوعة من القواعد، مثل الفراغات بين الكلمات، والعلامات الترقيمية كما في الفاصلة النهائية، وغيرها.

أما جزء ال Parser هو المكون الذي يأخذ السلسلة المجزأة التي تم إنشاؤها من قبل الـ tokenizer ويقوم بتحليلها وتفسيرها بناءً على بنية قواعد محددة مسبقًا (syntax rules). حيث يقوم ببناء ال tokens كشجرة بناء (tree) .

ومن ثم يمكنك تحويل تلك ال tree إلى الملف text الذى تريده وتقوم بوضع كل شئ في سطر منفصل.

إذا كنت ممبتدأ في البرمجة فأنصحك أولا بمذاكرة ال data structure وخاصة ال trees و ال stacks و من ثم يمكنك البحث   عن فكرة tokenizer و parser .

بتاريخ 8 ساعة قال NAIF:

اقصد ب الطريقة الغير معتادة في ضغط اكواد css  

هي إزالة  المسافات الزائدة  في الكود و ترك الاسطر مثل المثال السابق 

و اما الطريقة المعتادة هي إزالة جميع المسافات و الاسطر.

إذا كان كل ما تريده هو حذف جميع الفراغات من محتوى نصي (يمكن أن يكون CSS أو أي نص آخر)، فيمكن ببساطة استخدام التعابير النمطية (Regular Expressions) على النص الذي يدخله المستخدم.

لإنشاء تعبير نمطي يطابق المحارف المكافئة للفراغ (المسافة البيضاء، الجدولة، ومحرف خاص آخر نادر الاستعمال)، يمكن كتابة هذا التعبير النمطي:

/[ \t\f]/g

يمكن استخدام هذا التعبير النمطي في الدالة replace من String التي تعيد نسخة من النص بعد استبدال ما يطابق التعبير النمطي بمحتوى فارغ:

const formattedCSS = cssTextArea.value.replace(/[ \t\f]/g, "");

حيث cssTextArea هو عنصر <textarea> يقوم المستخدم بإدخال الكود فيه. النتيجة الآن موجودة في formattedCSS ويمكن عرضها على المستخدم.

لقد قمت بإنشاء ملف HTML فيه هذا الكود وهو يقوم بالمطلوب. أتركه لك في المرفقات.

formatCSS.html