Kode parsing (PARSE) : kode script, CSS, dan HTML yang diposting di blog ditampilkan apa adanya, tanpa dijalankan

Untuk memastikan bahwa kode script, CSS, dan HTML yang diposting di blog ditampilkan apa adanya, tanpa dijalankan, Anda dapat menggunakan fungsi escape() untuk menghindari karakter yang biasa digunakan dalam bahasa markup seperti <, >, &, dan " menjadi kode yang dienkripsi, atau lebih dikenal sebagai entitas HTML.

Berikut adalah contoh kode parsing yang dapat Anda gunakan untuk menghindari karakter khusus:

Dalam contoh ini, fungsi escape() digunakan untuk mengenkripsi kode, sehingga jika terdapat karakter khusus seperti <, >, &, dan ", karakter tersebut akan diubah menjadi entitas HTML. Sehingga kode yang ditampilkan di halaman blog akan di-render sebagai teks biasa, dan bukan dijalankan sebagai bahasa markup.

Contoh Parsing Kode

Kode:


Hasil:

Di atas adalah contoh hasilnya. Anda bisa mencoba paste kode html, atau css, atau javascript, untuk di-Parse.
Dan berikut adalah kodenya, Anda bisa copas untuk dipasang di blog Anda.
Jangan lupa meninggalkan komentar. Jangan ragu untuk bertanya, jika ada kesulitan, atau ingin paham lebih jelas.

CSS :

    
<style>
      pre {
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 3px;
        font-size: 14px;
        line-height: 1.5;
        padding: 10px;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      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>
    

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>
    

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>
    

Diatas, adalah contoh HTML lengkap yang sudah termasuk dengan fitur parsing dan tombol salin.

Program tersebut adalah sebuah aplikasi web sederhana yang memiliki fitur untuk melakukan parsing pada kode yang dimasukkan pengguna. Kode yang dimasukkan bisa berupa HTML, CSS, atau JavaScript. Setelah pengguna memasukkan kode tersebut, aplikasi akan melakukan parsing untuk mengubah karakter khusus pada kode menjadi karakter yang lebih aman untuk ditampilkan pada halaman web.

Aplikasi ini terdiri dari satu halaman web dengan tiga bagian utama yaitu kotak input kode, tombol "Parse", dan kotak output kode hasil parsing. Ketika pengguna menekan tombol "Parse", aplikasi akan menjalankan fungsi parseCode() yang melakukan parsing pada kode yang dimasukkan oleh pengguna.

Fungsi parseCode() akan menerima kode yang dimasukkan oleh pengguna sebagai parameter dan kemudian melakukan parsing pada karakter khusus seperti <, >, &, ", dan '. Karakter-karakter ini akan diubah menjadi kode HTML entity yang lebih aman untuk ditampilkan pada halaman web. Hasil parsing akan dikembalikan sebagai output dari fungsi parseCode().

Setelah fungsi parseCode() selesai dijalankan, output dari hasil parsing akan ditampilkan pada kotak output kode di halaman web. Selain itu, pengguna juga dapat menekan tombol "Copy All" untuk menyalin kode hasil parsing ke clipboard dan muncul pesan "Kode telah berhasil disalin!" sebagai umpan balik kepada pengguna.

Semoga berguna.
Afandi Kusuma.