Konversi Kode Agar Menjadi Perintah Teks

Mengubah Elemen Kode Menjadi Perintah Teks Dengan JavaScript.

Konversi Kode Agar Menjadi Perintah Teks - Paling sering terjadi dalam menuliskan kode tertentu adalah pada saat berkomentar, karena saat menyisipkan beberapa kode dalam kolom komentar, maka sudah pasti komentar Anda akan ditolak karena penggunaan tag HTML yang tidak diperbolehkan dalam bentuk perkodean dengan alert peringatan seperti ini:

Perlu di Coba - Memberi Bayangan Dengan Efek Curva Pada Box



Apa penyebabnya.?
Perintah teks yang Anda masukkan dalam kolom komentar mengandung tag kode yang tidak diperbolehkan masuk saat menyisipkan teks dalam komentar. Itu sebabnya banyak dari beberapa blog yang menyediakan tabel "Konversi Kode" pada aturan komentarnya, jika mereka/pengunjung ingin menuliskan salinan teks yang mengandung kode. Caranya cukup mengubah simbol kode tersebut dengan cara meng-konversi kode, agar hasilnya akan menjadi perintah teks, misalnya seperti ini:

<div style="text-align:center;color:darkred;">
...
Teks Anda Disini
...
</div>

- simbol ( < ) harus kita tuliskan menjadi &lt;
- simbol ( > ) harus kita tuliskan menjadi &gt;
- simbol ( ' ) harus kita ubah menjadi &#039;
- simbol ( " ) harus kita ubah menjadi &quot;
- simbol ( & ) harus kita tuliskan menjadi &amp;

Membuat tabel konversi kode seperti ini hanya untuk mempermudah pekerjaan Anda saat akan menyisipkan simbol kode agar tampil sebagai perintah teks. Sehingga Anda tidak lagi kerepotan jika harus mengubah simbol tersebut satu persatu.
Cukup tulis/pastekan kode yang akan Anda konversi untuk mendapatkan atau mengubah simbol kode tersebut agar menjadi perintah teks pada TABEL KONVERSI KODE dibawah ini:




COBA ALAT



Buat sahabat setia SAHABAT BLOGGER 77 yang ingin membuat tabel kolom konversi seperti diatas, pertemuan kali ini saya akan bagikan 2 versi terspesial buat sahabat semua. Namun sebelumnya baca juga Daftar Generator Penulisan Simbol HTML Terlengkap yang mungkin bermanfaat saat Anda akan membuat sebuah simbol dalam tulisan.


1. VERSI JAVASCRIPT

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

.button-select {
  margin:-1.7em auto;
  text-align:center;
  background:#666;
  width:98.8%;
  border-radius:3px;}
</style>
<textarea id="convert" placeholder="Letakkan kode Anda disini, lalu tekan TOMBOL &#039;Konversi&#039;"></textarea>
<div class="button-select">
<button onclick="cdConvert();"><span style='color:blue;font-weight:bold'>Konversi</span></button>   <button onclick="cdClear();"><span style='color:red;font-weight:bold'>Delete</span></button>
</div>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('convert');
    wtarea.value = '';}

function cdConvert() {
    var ctarea = document.getElementById('convert'),
        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>

2. VERSI JQUERY
Untuk tabel konversi pada versi ini, akan bekerja jika template Anda sudah dilengkapi dengan penggunaan script-jquery yang saya beri warna MERAH.

<style type="text/css">
#convert {color:blue;font-weight:bold}
#clear {color:red;font-weight:bold}
#codes {
  border:1px solid #666;
  width:98%;
  height:200px;
  margin:5px auto 10px;
  display:block;
  background:#333;
  color:#ccc;
  border-radius:5px;}

.button-group {
  margin:-16.6em auto;
  text-align:center;
  float:right;
  padding-right:5px;}
</style>
<textarea id="codes" placeholder="Letakkan kode Anda disini, lalu tekan TOMBOL &#039;Konversi&#039;"></textarea>
<div class="button-group">
<button id="convert">Konversi</button>    <button id="clear">Delete</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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>

Hasilnya:



DEMO SHOW


Demikian yang dapat saya bagikan, jika kiranya ada tabel konversi yang tidak bekerja, mungkin lagi libur.!! hehe.. Akhir kata saya ucapkan Terimakasih and by...bay..!!