عمل أداة تحويل الأكواد إلى تنسيق آمن باستخدامHTML وCss

شرح كود أداة تحويل الأكواد إلى تنسيق آمن

هذا المقال يشرح بالتفصيل كيفية عمل كود أداة تحويل الأكواد إلى تنسيق آمن باستخدام HTML, CSS, وJavaScript.

(1) الهيكل العام (HTML)

الجزء العلوي (العنوان والوصف):

<div align="center">
  <div class="tool-container">
    <div class="tool-header">
      <h3>كيف تستعمل هذه الأداة؟</h3>
      <p>فقط الصق أي أكواد تريد تحويلها إلى تنسيق آمن، ثم اضغط على زر "تحويل الكود". بعد التحويل، يمكنك نسخ الكود واستخدامه دون حدوث أي مشكلات.</p>
    </div>
</div>
    

• <div align="center">: يجعل المحتوى في وسط الصفحة.
• <div class="tool-container">: حاوية رئيسية للأداة.
• <div class="tool-header">: قسم لعنوان الأداة ووصفها.
• <h3>: عنوان الأداة.
• <p>: وصف بسيط لكيفية استخدام الأداة.

حقل النص والأزرار:

<div id="parser2">
  <textarea id="somewhere" placeholder="الصق الكود هنا..."></textarea>
  <div class="alert alert-success" id="btnInfo" role="alert" style="display: none;">
    <button class="close close-copy" onclick="hideAlert()" type="button">×</button>
    <h4>تم نسخ الكود إلى الحافظة</h4>
  </div>
  <div class="button-group">
    <button class="btn btn-primary btn-parse" onclick="convert()" type="button">تحويل الكود</button>
    <button class="btn btn-info btn-copy" onclick="copyCode()" type="button">نسخ</button>
    <button class="btn btn-danger btn-clear" onclick="clearCode()" type="button">تنظيف</button>
  </div>
</div>
    

• <textarea>: حقل نصي لإدخال الكود.
• id="somewhere": معرّف للحقل النصي للوصول إليه عبر JavaScript.
• placeholder="الصق الكود هنا...": نص تلميح يظهر داخل الحقل عندما يكون فارغًا.
• <div class="alert">: رسالة تنبيه تظهر عند نسخ الكود.
• style="display: none;": مخفية بشكل افتراضي.
• <button class="close">: زر لإغلاق التنبيه.
• <div class="button-group">: مجموعة أزرار للتحكم في الأداة.
• زر "تحويل الكود": يقوم بتحويل الكود إلى تنسيق آمن.
• زر "نسخ": يقوم بنسخ الكود المحول إلى الحافظة.
• زر "تنظيف": يقوم بمسح محتوى حقل النص.

(2) التنسيقات (CSS)

تنسيق الحاوية الرئيسية:

.tool-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
    

• max-width: 800px;: تحديد عرض أقصى للحاوية.
• margin: 0 auto;: توسيط الحاوية أفقياً.
• background: #f9f9f9;: لون خلفية الحاوية.
• border-radius: 10px;: حواف مستديرة للحاوية.
• box-shadow: إضافة ظل للحاوية.

تنسيق حقل النص:

#parser2 textarea {
  width: 100%;
  height: 200px;
  padding: 15px;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  font-size: 14px;
  color: #333;
  background: #fef1c8;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.05);
  resize: vertical;
}
    

• width: 100%;: عرض الحقل بنسبة 100% من الحاوية.
• height: 200px;: ارتفاع الحقل.
• font-family: خط مناسب لعرض الأكواد.
• background: #fef1c8;: لون خلفية الحقل.
• resize: vertical;: يسمح للمستخدم بتغيير ارتفاع الحقل.

تنسيق الأزرار:

.btn {
  font-size: 14px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #3e51b5;
  color: #fff;
}

.btn-info {
  background: #5bc0de;
  color: #fff;
}

.btn-danger {
  background: #f39c12;
  color: #fff;
}
    

• transition: all 0.3s ease;: إضافة تأثير انتقالي عند التحويم فوق الأزرار.
• ألوان الأزرار:
  • زر "تحويل الكود": أزرق (#3e51b5).
  • زر "نسخ": أزرق فاتح (#5bc0de).
  • زر "تنظيف": برتقالي (#f39c12).

(3) الوظائف (JavaScript)

دالة التحويل (convert):

function convert() {
  const input = document.getElementById("somewhere");
  let code = input.value.trim();

  if (code === "") {
    alert("يرجى إدخال كود لتحويله.");
    return;
  }

  code = code.replace(/&/g, "&")
             .replace(//g, ">")
             .replace(/"/g, """)
             .replace(/'/g, "'");

  input.value = code;
}
    

• input.value.trim(): يحصل على النص من الحقل ويحذف الفراغات الزائدة.
• replace: يحول الرموز الخاصة إلى كيانات HTML:
  • & → &
  • < → <
  • > → >
  • " → "
  • ' → '

دالة النسخ (copyCode):

function copyCode() {
  const input = document.getElementById("somewhere");
  input.select();
  document.execCommand("copy");

  const alert = document.getElementById("btnInfo");
  alert.style.display = "block";
  setTimeout(() => alert.style.display = "none", 3000);
}
    

• input.select(): يحدد النص في الحقل.
• document.execCommand("copy"): ينسخ النص المحدد إلى الحافظة.
• alert.style.display = "block": يعرض رسالة التنبيه.
• setTimeout: يخفي الرسالة بعد 3 ثوانٍ.

دالة التنظيف (clearCode):

function clearCode() {
  document.getElementById("somewhere").value = "";
}

• input.value = "": يمسح محتوى حقل النص.

دالة إخفاء التنبيه (hideAlert):

function hideAlert() {
  document.getElementById("btnInfo").style.display = "none";
}
    

• alert.style.display = "none": يخفي رسالة التنبيه.

(4) كيف يعمل الكود؟

1. إدخال الكود: يقوم المستخدم بلصق الكود في الحقل النصي.
2. تحويل الكود: عند النقر على "تحويل الكود"، يتم تحويل الرموز الخاصة إلى كيانات HTML.
3. نسخ الكود: عند النقر على "نسخ"، يتم نسخ الكود المحول إلى الحافظة.
4. تنظيف الحقل: عند النقر على "تنظيف"، يتم مسح محتوى الحقل النصي.

(5) مثال عملي

قبل التحويل <div class="example"> <p>Hello, World!</p> </div>
بعد التحويل <div class="example"> <p>Hello, World!</p> </div>

(6) ملاحظات

• الكود يعمل بشكل كامل ويمكن استخدامه في أي موقع ويب.
• يمكنك تعديل الألوان والأحجام في CSS لتتناسب مع تصميمك.
• إذا كنت بحاجة إلى تحويلات إضافية، يمكنك تعديل دالة convert().

الكود

<div align="center">
  <style scoped="" type="text/css">
    /* CSS سيتم وضعه في الجزء التالي */
  </style>

  <div class="tool-container">
    <div class="tool-header">
      <h3>كيف تستعمل هذه الأداة؟</h3>
      <p>فقط الصق أي أكواد تريد تحويلها إلى حقل النص، ثم اضغط على زر "تحويل الكود". بعد التحويل، يمكنك نسخ الكود واستخدامه دون حدوث أي مشكلات.</p>
    </div>

    <div id="parser2">
      <textarea id="somewhere" placeholder="الصق الكود هنا..."></textarea>
      <div class="alert alert-success collapse" id="btnInfo" role="alert">
        <button class="close close-copy" onclick="hideAlert()" type="button">×</button>
        <h4>تم نسخ الكود إلى الحافظة</h4>
      </div>
      <div class="button-group">
        <button class="btn btn-primary btn-parse" onclick="convert()" type="button">تحويل الكود</button>
        <button class="btn btn-info btn-copy" onclick="copyCode()" type="button">نسخ</button>
        <button class="btn btn-danger btn-clear" onclick="clearCode()" type="button">تنظيف</button>
      </div>
    </div>
  </div>
</div>
<style scoped="" type="text/css">
  .tool-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .tool-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .tool-header h3 {
    font-size: 24px;
    color: #333;
  }

  .tool-header p {
    font-size: 16px;
    color: #666;
  }

  #parser2 textarea {
    width: 100%;
    height: 200px;
    padding: 15px;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 14px;
    color: #333;
    background: #fef1c8;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.05);
    resize: vertical;
  }

  #parser2 textarea:focus {
    outline: none;
    border-color: #3e51b5;
  }

  .button-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }

  .btn {
    font-size: 14px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .btn-primary {
    background: #3e51b5;
    color: #fff;
  }

  .btn-primary:hover {
    opacity: 0.9;
  }

  .btn-info {
    background: #5bc0de;
    color: #fff;
  }

  .btn-info:hover {
    background: #31b0d5;
  }

  .btn-danger {
    background: #f39c12;
    color: #fff;
  }

  .btn-danger:hover {
    opacity: 0.9;
  }

  .alert {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
  }

  .alert.show {
    display: block;
  }

  .close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #333;
  }

  .close:hover {
    color: #000;
  }
</style>
<script>
  // دالة تحويل الكود إلى تنسيق آمن ووضعه في الهيكل المطلوب
  function convert() {
    const input = document.getElementById("somewhere");
    let code = input.value.trim();

    if (code === "") {
      alert("يرجى إدخال كود لتحويله.");
      return;
    }

    // تحويل الرموز الخاصة إلى كيانات HTML
    code = code.replace(/&/g, "&amp;")
               .replace(/</g, "&lt;")
               .replace(/>/g, "&gt;")
               .replace(/"/g, "&quot;")
               .replace(/'/g, "&#039;");

    // إنشاء الهيكل المطلوب وإدراج الكود المحول فيه
    const formattedCode = `
<div class="pre nb" data-text="كود المثال" data-file="example" data-lang="javascript">
    <pre><code class="language-javascript">
${code}
    </code></pre>
</div>
    `;

    // إظهار الكود المحول في الحقل
    input.value = formattedCode;
  }

  // دالة نسخ الكود
  function copyCode() {
    const input = document.getElementById("somewhere");
    input.select();
    document.execCommand("copy");

    const alert = document.getElementById("btnInfo");
    alert.style.display = "block";
    setTimeout(() => alert.style.display = "none", 3000);
  }

  // دالة تنظيف الحقل
  function clearCode() {
    document.getElementById("somewhere").value = "";
  }

  // دالة إخفاء التنبيه
  function hideAlert() {
    document.getElementById("btnInfo").style.display = "none";
  }
</script>
    

تابعنا في المقالة القادمة لتعرف كيفية التركيب