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



GambarTabel Konversi Kode



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 seperti ini tidak akan saya berikan, tetapi karena blog SAHABAT BLOGGER 77 berulang tahun yang ke 1 Tahun 4 Bulan terhitung sejak saat ini, hehe... jadi saya akan memberikan cara membuat tabel konversi kode untuk kali ini, kode lengkapnya seperti ini:

<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Graduate|Arial);
textarea{
  box-sizing:border-box;
  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.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= JavaScript Konversi Kode Otomatis
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

12 komentar

  1. weeeeeh ,,,, iya nih bisanya untuk konvrsi hrus di klik dulu ,,,, ini dah lngsung otomatis .....

    kek sy nih ,,,, otomatis ketarik sndri kesni untk liat rumahnya devy ,,,hehe

    BalasHapus
    Balasan
    1. biar lebih mudah, praktis dan cepat mas, kan orang maunya yang praktis-praktis, apalagi yang otomatis (kagak mau repot-repot) katanya.?

      Hapus
    2. gara-gara mas fiu saya juga ikutan ketarik kesini nich (c)

      Hapus
    3. huh ... kn yg ketrik cuma sy kg jum ,,, kok malah jadi ikut ketarik juga sih gmn certna coba ,,, :D

      Hapus
  2. wah.. keren nih, kalau kita ketik kode langsung otomatis terkonversi, tapi tadi saya coba paste kode kok nggak muncul konversinya?

    BalasHapus
    Balasan
    1. maca sih, sudah devy coba gak ada masalah kok bos.

      Hapus
    2. beneran, kalau di enter lah baru bisa, apa browser nya yang bermasalah yia...

      oya ijin kopi kodenya, tadi lupa minta ijin, hehehe...

      Hapus
    3. hadech..
      kebiasaan nich mas cc :d

      Hapus
  3. yaa baru tau ni
    ijin copy ya dev

    salam kenal yaaa

    BalasHapus
  4. wah hebat mbak devy ni, sudah mengimbangi situs parse yang sering saya gunakan, nanti saya ke sini aja deh :D

    BalasHapus
  5. gan gimana caranya sungguh luar biasa

    BalasHapus
  6. Trik Bagus nih untuk meringankan kode HTML :)
    salam sukses

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK