Home  ›  HTML

Membuat Tools Pembersih HTML yang Menyisakan Tag A yang di Dalamnya Terdapat Tag H2 Berbasis Web Atau HTML

√ Membuat Tools Pembersih HTML yang Menyisakan Tag A yang di Dalamnya Terdapat Tag H2 Berbasis Web Atau HTML



Selamat datang di Web TulisanIB. Pada artikel kali ini penulis akan membagikan tutorial bagaimana cara membuat tools cleaner atau pembersih HTML berbasis web atau HTML yang akan menyisakan Tag A saja yang di dalamnya terdapat Tag H2.

Jadi bagi kalian yang mempunyai kode HTML campuran dan banyak daftar kode link yang di dalam kode link tersebut terdapat Tag H2 tools ini sangat bermanfaat untuk kalian membersihkan kode HTML campuran kalian.

Tools ini berbasis web atau HTML, jadi kalian membutuhkan sebuah browser untuk menggunakan tools ini.

Tenang saja. Walaupun berbasis web atau HTML, tools ini bisa digunakan saat kalian tidak menggunakan internet.

Tampilan tools-nya bisa kalian lihat pada gambar di bawah.



Bagaimana? Tertarik untuk membuatnya? Baiklah berikut adalah langkah-langkah membuatnya.
  1. Kalian buat terlebih dulu file HTML, judulnya bebas. Kalau masih bingung cara membuatnya, kalian bisa membaca artikel yang telah penulis buat sebelumnya: "Cara Membuat File dengan Format Apapun di Windows dengan Mudah".
  2. Lalu buka file HTML yang sudah kita buat tersebut menggunakan aplikasi text editor. Bisa menggunakan Notepad, Notepad++, atau Sublime Text. Penulis menyarankan untuk menggunakan Sublime Text karena ringan.
  3. Copy kode berikut:
    <!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>HTML Cleaner</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 900px;
      margin: 20px auto;
      padding: 20px;
      background: #f8f9fa;
      color: #333;
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
    }
    textarea {
      width: 100%;
      height: 200px;
      margin-top: 10px;
      padding: 10px;
      font-family: monospace;
      border: 1px solid #ccc;
      border-radius: 5px;
      background: #fff;
    }
    button {
      background: #007bff;
      color: white;
      border: none;
      padding: 10px 15px;
      margin: 10px 5px 10px 0;
      cursor: pointer;
      border-radius: 5px;
    }
    button:hover {
      background: #0056b3;
    }
    .section {
      margin-bottom: 25px;
    }
    label {
      display: block;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>HTML Cleaner</h1>
  <p>Hanya menyisakan tag <code>&lt;a&gt;</code> yang di dalamnya terdapat <code>&lt;h2&gt;</code>.</p>

  <div class="section">
    <h3>1. Upload File HTML</h3>
    <input type="file" id="fileInput" accept=".html,.htm,.txt">
  </div>

  <div class="section">
    <h3>2. Atau Tempel Kode HTML</h3>
    <textarea id="inputHtml" placeholder="Tempelkan kode HTML di sini..."></textarea>
    <button onclick="cleanFromTextarea()">Bersihkan</button>
    <label>
      <input type="checkbox" id="removeH2"> Hapus tag &lt;h2&gt; (simpan teksnya saja)
    </label>
    <label>
      <input type="checkbox" id="sortAlpha"> Urutkan hasil sesuai abjad
    </label>
  </div>

  <div class="section">
    <h3>Hasil Bersih</h3>
    <textarea id="output" placeholder="Hasil bersih akan muncul di sini..."></textarea>
    <br>
    <button onclick="downloadCleaned()">Download Hasil</button>
    <button onclick="copyToClipboard()">Copy ke Clipboard</button>
  </div>

  <script>
    let cleanedContent = "";

    // Fungsi untuk membersihkan konten HTML
    function cleanHTML(htmlString) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlString, "text/html");

      let anchors = doc.querySelectorAll("a");
      let results = [];
      const removeH2 = document.getElementById("removeH2").checked;
      const sortAlpha = document.getElementById("sortAlpha").checked;

      anchors.forEach(a => {
        const h2 = a.querySelector("h2");
        if (h2) {
          if (removeH2) {
            const text = h2.innerHTML.trim();
            h2.replaceWith(text);
          }
          results.push(a.outerHTML);
        }
      });

      // Jika centang urutkan sesuai abjad
      if (sortAlpha) {
        results.sort((x, y) => {
          const xt = x.replace(/<[^>]+>/g, "").trim().toLowerCase();
          const yt = y.replace(/<[^>]+>/g, "").trim().toLowerCase();
          return xt.localeCompare(yt, "id"); // urutan bahasa Indonesia
        });
      }

      return results.join("\n\n");
    }

    // Upload file
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function(e) {
        cleanedContent = cleanHTML(e.target.result);
        document.getElementById("output").value = cleanedContent;
      };
      reader.readAsText(file);
    });

    // Bersihkan dari textarea input
    function cleanFromTextarea() {
      const inputContent = document.getElementById("inputHtml").value;
      if (!inputContent.trim()) {
        alert("Silakan tempelkan kode HTML terlebih dahulu.");
        return;
      }
      cleanedContent = cleanHTML(inputContent);
      document.getElementById("output").value = cleanedContent;
    }

    // Download hasil
    function downloadCleaned() {
      if (!cleanedContent) {
        alert("Belum ada konten yang dibersihkan!");
        return;
      }
      const blob = new Blob([cleanedContent], { type: "text/html" });
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = "cleaned.html";
      link.click();
    }

    // Copy ke clipboard
    function copyToClipboard() {
      const output = document.getElementById("output");
      if (!output.value.trim()) {
        alert("Tidak ada hasil untuk disalin!");
        return;
      }
      output.select();
      document.execCommand("copy");
      alert("Hasil berhasil disalin ke clipboard!");
    }
  </script>
</body>
</html>
  4. Lalu paste di file HTML yang sudah kita buat tadi.
  5. Save file HTML ini.
  6. Selesai, tools-nya sudah bisa digunakan, buka tools ini menggunakan browser yang kalian gunakan untuk menggunakan tools ini.


Bagaimana? Mudah sekali bukan membuat tools pembersih HTML yang menyisakan Tag A saja yang di dalamnya terdapat Tag H2?

Insya Allah sangat mudah sekali, apabila kalian masih bingung kalian bisa membaca lagi langkah-langkah di atas agar semakin paham.

Sekian apa yang bisa penulis sampaikan pada artikel "Membuat Tools Pembersih HTML yang Menyisakan Tag A yang di Dalamnya Terdapat Tag H2 Berbasis Web Atau HTML" ini. Semoga artikel ini bisa bermanfaat untuk semua orang dan terutama bagi yang sedang membutuhkan artikel ini.
Share on Social Media