Parse HTML & De HTML dengan JavaScript: Penjelasan, Fungsi, dan Tutorialnya

Table of contents

[Show]

📌 Apa Itu Parse HTML dan De HTML?

Dalam konteks web development, Parse HTML adalah proses mengubah kode HTML menjadi teks biasa agar tidak dirender oleh browser. 

Sedangkan De HTML (atau decode HTML entities) adalah proses mengembalikan teks hasil parse menjadi kode HTML asli agar bisa kembali ditampilkan sebagai elemen.

Contoh:

• HTML Asli
  <div class="kotak">Halo</div>

• Hasil Parse
  <div class="kotak">Halo</div>

• De HTML (kembali ke asli)
  <div class="kotak">Halo</div>

---

🎯 Fungsi Parse dan De HTML

✅ Fungsi Parse HTML:

• Untuk menampilkan kode di halaman blog tanpa dieksekusi.

• Mencegah error ketika memasukkan kode ke widget Blogger atau CMS.

• Menghindari konflik atau render otomatis oleh browser.

• Cocok untuk keperluan tutorial coding.

✅ Fungsi De HTML:

• Untuk mengembalikan kode hasil parse agar bisa dijalankan kembali.

• Berguna saat ingin mengeksekusi kembali kode HTML yang sudah tersimpan sebagai string teks.

• Membantu mengedit ulang kode hasil parse.

---

🧪 Contoh Parse HTML dan De HTML

✅ Kode Asli:

<button onclick="alert('Halo!')">Klik Saya</button>

✅ Parse HTML (hasil ditampilkan di halaman blog):

<button onclick="alert('Halo!')">Klik Saya</button>

✅ De HTML (agar bisa dikembalikan ke fungsi aslinya):

<button onclick="alert('Halo!')">Klik Saya</button>

---

💡 Bagaimana Cara Parse & De HTML Secara Otomatis?

Tenang, kamu nggak perlu melakukannya manual! Kamu bisa langsung gunakan tools Parse & De HTML otomatis di sini:

🔗 Parse & De HTML Tool – AdinJava

---

🛠️ Tutorial Penggunaan Tools

1. Buka halaman tools di atas.

2. Tulis atau tempel kode HTML kamu ke kolom yang tersedia.

3. Klik tombol:

   • “Parse HTML” untuk mengubah menjadi teks aman.

   • “De HTML” untuk mengembalikan ke format HTML asli.

4. Salin hasilnya dan gunakan sesuai kebutuhan.

---

📁 Implementasi dengan JavaScript

Di balik layar, tools ini menggunakan fungsi JavaScript seperti berikut:

Fungsi Parse HTML:

function escapeHtml(str) {
  return str
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

Fungsi De HTML:

function unescapeHtml(str) {
  var doc = new DOMParser().parseFromString(str, "text/html");
  return doc.documentElement.textContent;
}

---

📌 Kesimpulan

Parse HTML dan De HTML adalah dua proses penting dalam pengelolaan konten berbasis kode. Dengan alat yang tepat, seperti tools dari AdinJava, kamu bisa dengan mudah mengonversi dan mengelola kode untuk ditampilkan, disimpan, atau dijalankan kembali.

🔗 Yuk coba sekarang di:
👉 https://adinjava.blogspot.com/p/parse-html-javascript.html

Berbagi :