Mem-parse kode yang dimasukkan di Kotak

Di halaman ini masih ada kesalahan. Program tidak bisa berfungsi dengan baik.

ini adalah contoh yang gagal. Dan ada contoh yang lebih berhasil buka linknya di : Kode parsing : kode script, CSS, dan HTML yang diposting di blog ditampilkan apa adanya

---

Untuk membuat tombol yang bisa mem-parse kode yang dimasukkan di kotak, kita bisa menggunakan JavaScript untuk mengambil teks yang ada di dalam kotak dan mem-parse-nya dengan metode seperti eval(). Berikut adalah contoh kode HTML, CSS, dan JavaScript yang dapat Anda gunakan untuk membuat tombol parse:

Contoh Parsing Kode

Kode:


Hasil:

HTML:

    <h1>Contoh Parsing Kode</h1>
    <label for="code-input">Kode:</label>
    <br>
    <textarea id="code-input" rows="12"></textarea>
    <br>
    <button id="parse-button">Parsing Kode</button>
    <button id="copy-button">Salin Kode</button>
    <br>
    <label for="code-output">Hasil:</label>
    <br>
    <pre id="code-output"></pre>  

CSS:

<style>  
#code-input {
  width: 99%;
  margin-bottom: 10px;
}
      button {
        margin-top: 10px;
        padding: 5px 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
      button:hover {
        background-color: #3e8e41;
      }
</style>  

JavaScript:

    <script>
      const parseButton = document.getElementById("parse-button");
      const copyButton = document.getElementById("copy-button");
      const codeInput = document.getElementById("code-input");
      const codeOutput = document.getElementById("code-output");

      parseButton.addEventListener("click", () => {
        const code = codeInput.value;
        const parsedCode = parseCode(code);
        codeOutput.textContent = parsedCode;
      });

      copyButton.addEventListener("click", () => {
        const code = codeOutput.textContent;
        navigator.clipboard.writeText(code);
        copyButton.textContent = "Kode telah berhasil disalin!";
        setTimeout(() => {
          copyButton.textContent = "Salin Kode";
        }, 2000);
      });

      function parseCode(code) {
        const encodedCode = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        return encodedCode;
      }
    </script>
  

Dalam contoh ini, kita menggunakan elemen <textarea> untuk mengambil input kode dari pengguna, dan elemen <pre> untuk menampilkan output dari kode yang sudah di-parse. Ketika tombol "Parse Kode" di klik, kode input akan di-parse menggunakan eval() dan hasilnya akan ditampilkan di dalam elemen <pre>. Namun, perlu diingat bahwa menggunakan eval() dapat membuka celah keamanan dalam kode Anda, dan dapat membahayakan aplikasi atau pengguna. Pastikan untuk memeriksa kode yang dimasukkan dengan hati-hati sebelum mem-parse-nya.