Dua Versi Konverter HTML

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:0px auto 0px;
  text-align:center;
}
</style>
<textarea id="codes"placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></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>

• Simpan

Versi JQuery

Terserah apakah kode ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa template 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:0px auto 0px;
  text-align:center;
}
</style>
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></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>

Lihat Demo