استخراج المتغيرات من عناصر HTML باستخدام JavaScript

في هذا السياق، يمكننا استخدام لغة البرمجة JavaScript لاستخراج المتغيرات من عناصر HTML وتخزينها في متغيرات JavaScript. لديك عنصر div في HTML يحتوي على معلومات الأسماء بتنسيق معين، وترغب في استخدام JavaScript لتخزين هذه المعلومات في متغيرات منفصلة. دعنا نقوم بذلك بشكل فعال ومنظم.

للقيام بذلك، يمكنك استخدام ميزات الاختيار والتحليل في JavaScript للوصول إلى نصوص الأسماء داخل عنصر div، ومن ثم تخزينها في متغيرات. فيما يلي رمز JavaScript يقوم بهذه المهمة:

htmlCopy code


<script>
    // الحصول على عنصر div بواسطة الهوية
    var namesDiv = document.getElementById('names');

    // الحصول على نص العنصر
    var namesText = namesDiv.innerText;

    // تقسيم النص إلى سطور باستخدام الفاصلة الجديدة '\n'
    var namesArray = namesText.split('\n');

    // إنشاء متغيرات لكل اسم
    var name1 = namesArray[1].split('[')[1].slice(0, -1);
    var name2 = namesArray[2].split('[')[1].slice(0, -1);
    var name3 = namesArray[3].split('[')[1].slice(0, -1);
    var name4 = namesArray[4].split('[')[1].slice(0, -1);

    // عرض النتائج في وحدة التحكم
    console.log("name1: " + name1);
    console.log("name2: " + name2);
    console.log("name3: " + name3);
    console.log("name4: " + name4);
script>

في هذا الكود، نبدأ بالحصول على عنصر div باستخدام getElementById. ثم نقوم بالحصول على نص العنصر باستخدام innerText. بعد ذلك، نقوم بتقسيم النص إلى أسطر باستخدام split('\n').

نستخدم طريقة الـ split لتقسيم النص بناءً على الفواصل، ومن ثم نقوم بفصل الأسماء عن القيم باستخدام split('[') ونقوم بإزالة الأقواس الزاوية بواسطة slice(0, -1).

أخيرًا، يتم إنشاء متغير لكل اسم ويتم عرض النتائج في وحدة التحكم باستخدام console.log. يمكنك تحديث هذا الكود حسب احتياجاتك الخاصة.

بالطبع، دعونا نوسع على الكود السابق ونقدم مزيدًا من المعلومات حول كيفية تحسينه وتحسين تنظيم الشيفرة. يمكننا أيضًا مناقشة بعض النقاط الهامة حول كيفية تحسين تفاعل البرنامج مع تغييرات في هيكل HTML.

لبداية، يمكننا تحسين الكود ليكون أكثر قابلية للصيانة وإعادة الاستخدام. قد يكون من الجيد إنشاء وظيفة (function) تأخذ عنصر div كمدخل وتقوم بإرجاع كائن يحتوي على جميع المتغيرات. هذا يمكن أن يجعل الكود أكثر تنظيمًا ويسهل فهمه.

htmlCopy code


<script>
    function extractNames(divId) {
        // الحصول على عنصر div بواسطة الهوية
        var namesDiv = document.getElementById(divId);

        // التحقق مما إذا كان العنصر موجودًا
        if (!namesDiv) {
            console.error("Element with ID " + divId + " not found.");
            return null;
        }

        // الحصول على نص العنصر
        var namesText = namesDiv.innerText;

        // تقسيم النص إلى سطور باستخدام الفاصلة الجديدة '\n'
        var namesArray = namesText.split('\n');

        // إنشاء كائن يحتوي على المتغيرات
        var namesObject = {
            name1: namesArray[1].split('[')[1].slice(0, -1),
            name2: namesArray[2].split('[')[1].slice(0, -1),
            name3: namesArray[3].split('[')[1].slice(0, -1),
            name4: namesArray[4].split('[')[1].slice(0, -1)
        };

        // إرجاع الكائن
        return namesObject;
    }

    // استخدام الوظيفة وعرض النتائج في وحدة التحكم
    var extractedNames = extractNames('names');
    if (extractedNames) {
        console.log("name1: " + extractedNames.name1);
        console.log("name2: " + extractedNames.name2);
        console.log("name3: " + extractedNames.name3);
        console.log("name4: " + extractedNames.name4);
    }
script>

في هذا الكود، تم إنشاء وظيفة extractNames التي تأخذ divId كمدخل وتقوم بإرجاع كائن يحتوي على المتغيرات المستخرجة. تم إضافة فحص للتحقق مما إذا كان العنصر موجودًا أم لا، مما يساعد في تجنب الأخطاء المحتملة.

يمكنك أيضًا تحسين الكود بمزيد من التعامل مع البيانات، مثل التحقق من صحة القيم المستخرجة أو تجنب الأخطاء الناتجة عن تغييرات في تنسيق HTML.