Dua Versi Konverter HTML

Tabel Konten
  1. Versi JavaScript Mentah 
  2. Versi jQuery 
HTML Convertion Tool
Membuat konverter HTML dengan JavaScript atau jQuery

Versi JavaScript Mentah 

Konverter HTML dengan JavaScript mentah bisa dibuat dengan mudah. Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<style type="text/css">
#codes {
  border:1px solid #666;
  width:98%;
  height:200px;
  margin:5px auto 10px;
  display:block;
}

.button-group {
  margin:0 auto;
  text-align:center;
}
</style>
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik &#039;Konversi&#039;"></textarea>
<div class="button-group">
    <button onclick="cdConvert();">Konversi</button>
    <button onclick="cdClear();">Bersihkan</button>
</div>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
}

function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value;
    cv = cv.replace(/&/g, "&amp;");
    cv = cv.replace(/'/g, "&#039;");
    cv = cv.replace(/"/g, "&quot;");
    cv = cv.replace(/</g, "&lt;");
    cv = cv.replace(/>/g, "&gt;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
}
</script>

Klik Simpan.

Lihat Demo

Versi jQuery 

Terserah apakah kode ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa tema Anda sudah dilengkapi dengan jQuery, maka konverter HTML ini akan bekerja:

<style type="text/css">
#codes {
  border:1px solid #666;
  width:98%;
  height:200px;
  margin:5px auto 10px;
  display:block;
}

.button-group {
  margin:0 auto;
  text-align:center;
}
</style>
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik &#39;Konversi&#39;"></textarea>
<div class="button-group">
    <button id="convert">Konversi</button>
    <button id="clear">Bersihkan</button>
</div>
<script type="text/javascript">
$(function() {
    $('button#convert').click(function() {
        $('textarea#codes').val(
        $('textarea#codes').val()
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;")
        ).focus().select();
        return false;
    });
    $('button#clear').click(function() {
        $('textarea#codes').val('').focus().select();
        return false;
    });
});
</script>

Klik Simpan.

Lihat Demo

5 Komentar

  • Beben Koben

    prasaan demonya gak jalan!!!
    cekikikiki :P

  • Taufik Nurrohman

    @Beben Koben Oke, sekarang sudah jalan. Nggak tau tuh tiba-tiba panel JSnya jadi kosong. Padahal nggak diapa-apain. Trim atas rambu-rambunya.

  • BrayenL

    Mas Taufik, cara buat Comment message yang diatas Komentar + Tombol konversinya itu gimana mas.

    • Taufik Nurrohman

      Letakkan kode HTML apa saja di atas <data:blogCommentMessage/> untuk menyisipkan sesuatu sebelum pesan komentar. Misalnya seperti ini:

      <p>
      <button>Konversi Kode di Sini!</button>
      </p>
      <p>
      <data:blogCommentMessage/>
      </p>
  • Unknown

    mas saya mau buat seperti ini http://dte.googlecode.com/svn/brain/map/html-escaper.html tapi saya ingin edit sendiri warnanya X@
    mohon dibales di http://yoga-tc.blogspot.com/ supaya bisa terbaca oleh saya :D

Komentar telah ditutup.