JavaScript Konversi Kode Otomatis

JavaScript Konversi Kode Otomatis - Saat kita menuliskan simbol teks sebagai kode pada halaman HTML, maka saat tulisan tersebut ditampilkan maka teks akan berubah menjadi perintah kode. HTML mendeteksi simbol tag seperti ini:

- simbol ( < )
- simbol ( > )
- simbol ( ')
- simbol ( " )
- simbol ( & )

sebagai tag kode, sehingga saat simbol yang kita tuliskan tidak akan ditampilkan dalam bentuk teks, melainkan sebagai perintah kode. Agar kode tersebut tampil sebagai teks biasa, yang perlu kita lakukan hanya merubah semua tag kode tersebut dengan mengganti tag (<) menjadi (&lt;), (>) menjadi (&gt;) dan seterusnya. Sebagai contoh, coba buka formulir posting baru model HTML, lalu Copy kode dibawah ini dan Pastekan pada halaman mode tulis HTML dengan teks kode seperti ini:

<style type='text/css'>
/*-----
.konversi {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 5px 10px;
  text-align: left;
-----*/
}
</style>
<div class="konversi">JavaScript Konversi Kode</div>

Maka saat tulisan Anda publikasikan, halaman akan terlihat kosong karena teks yang Anda tuliskan terdeteksi sebagai perintah tag kode. Namun jika semua tag kode diatas kita konversi, maka semua kode tersebut akan ditampilkan sebagai teks biasa. Jika semua tag kode tersebut Anda ganti satu persatu pekerjaan yang sulit bukan.?, untuk memudahkan pekerjaan Anda, disini sudah saya siapkan Alat Konversi Kode Otomatis Dengan JavaScript yang bisa Anda gunakan untuk merubah semua tag kode menjadi teks biasa seperti ini:




COBA ALAT

Baca juga - Artikel Tampil Full Tanpa Sidebar

Perintah yang sama pada Konversi Kode Agar Menjadi Perintah Teks di artikel sebelumnya, namun tombol konversi saya hilangkan pada alat konversi kali ini, saya gantikan dengan tabel textarea untuk menampilkan hasil koversi secara otomatis saat Anda letakkan kode pada tabel konversi, sehingga pekerjaan Anda lebih mudah, praktis dan cepat untuk merubah kode tersebut menjadi teks biasa.

Sebenarnya untuk membuat alat konversi kode otomatis

<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Graduate|Arial);
textarea{
  box-sizing:border
  width:100%;
  height:160px;
  padding:10px;
  overflow:hidden;
  border-top:3px solid aqua;}
</style>
<script type='text/javascript'>
function copyText(){
var code = document.getElementById('code');
var code2 = document.getElementById('code2');
var str = code.value;
var str = str.replace(/&/g, "&amp;");
var str = str.replace(/</g, "&lt;");
var str = str.replace(/>/g, "&gt;");
var str = str.replace(/'/g, "&#39;");
if (code != null){code2.value = str;}
}copyText();
</script>
<textarea id="code" onkeyup="copyText()" placeholder="Letakkan kode Anda disini, lalu LIHAT hasilnya dibawah"></textarea>

<textarea style="border-top:3px solid red" id="code2" name="code2" placeholder="Hasil Konversi Kode"></textarea>

Semoga alat konversi ini dapat memudahkan pekerjaan Anda untuk merubah tag kode menjadi perintah teks. Akhir cerita saya ucapkan terima kasih.