Senin, 18 April 2016

Cara parse kode html didalam div




Tutorial javascript, kali ini yang akan saya bahas adalah tentang cara mengubah/memparse html yang ada didalam tag div atau tag pre dengan id tertentu. jadi, meski kita menuliskan kode didalam tag div atau pre meski berbentuk html maka dengan javascript dibawah ini, maka kode html yang ada didalam tag div atau pre dengan id #ubah akan terubah/terparse otomatis jadi tidak perlu lagi kita repot2 memparse kode lagi.

Simpan scriptnya dibawah ini diatas tag </body>

<script type="text/javascript">
//Seleksi ID atau Class dari tag div atau pre
var ubah = document.querySelector("#ubah");
//Dapatkan teks dan html yang ada didalam div dengan id='ubah'
var b = ubah.innerHTML;
//Ganti karakter < dan > yang ada didalam tag div dengan id='ubah'
b = b.replace(/</g,"<");
b = b.replace(/>/g,">");
//terakhir ganti teks/html dan tukar
//dengan teks/html yang sudah diubah memakai javascript
ubah.innerHTML = b;
</script>

lihatlah contoh dibawah ini untuk melihat gambaranya bagaimana cara kerjanya.

DEMO

Cara menggunakannya cukup mudah anda tinggal menulis tag seperti ini:

<div id="ubah">Disini isi dengan tag html2 yang akan anda share</div>

Atau mungkin seperti ini

<pre id="ubah">Disini isi dengan tag html2 yang akan anda share</pre>

Coba sendiri deh nanti pasti kita tahu bagaimana cara kerjanya.