Cara Membuat Parse HTML Javascript

Senin, Desember 03, 2012
Membuat Parse HTML

Cara membuat parse HTML, dari judulnya mungkin yang akan di bahas sangat berat. Tapi kalau menurut saya ini adalah dasar dari suatu web programing. Walaupun dasar, orang orang yang bukan dari latar pendidikan TI seperti saya pasti akan sempat dipusingkan dengan kode kode ini. Tapi saya yakin anak anak TI sangat familier dengan membuat parse HTML.

Sebenarnya disini saya jadi bingung, beberapa blog anak TI menuliskan script ini sebagai parsing HTML. Saya yang bukan dari TI atau Ilmu Komputer, jadi saya cuman bisa ngikut saja. Tapi dalam hal ini saya tetap dalam pemahaman saya kalau script yang akan kita bahas ini bukanlah parse HTML namun Encode HTML.

Sebelum menginjak pembahasan script kita bahasa dulu apa sebenarnya parse menurut Blogger Sragen. Parse adalah metode pemisahan. Kalau Parse HTML adalah memisahkan HTML dengan teks. Misalnya begini.

  1. <h1>Parse HTML</h1>

Diharapkan dari parse ini kita bisa mengambil nilai Parse HTML bukan malah merubahnya.

Saya tadi menyinggung HTML encode. Metode ini jelas mengubah HTML menjadi nilai lain. Misal string teks, hex, ascii dan lain lain. Nah dari sinilah kenapa saya mengambil kesimpulan bahwa script yang akan saya berikan ini buka parse HTML namun encode HTML. Tapi tidak menjadi masalah yang penting anda paham dengan cara kerjanya.

Untuk membuat HTML encode ada beberapa programing yang bisa digunakan. Bisa memakai VB, ASP, PHP, Java dan lain lain. Setiap bahasa tersebut sebenarnya sama cuman sourcenya yang berbeda. Nah kali ini sekalian saya belajar javascript kita akan membahasnya. Perlu diketahui disini kita belajar bukan cuman menggunakan biar anda dan saya juga paham. Tapi kalau memang anda hanya kepingin hasil jadi silahkan saja buka blog orang lain wkwkwk. Pusiiing sukuriiin :p

Kita langsung ke pokok masalah, membuat encoder banyak metode yang bisa di gunakan. Walaupun itu masih satu bahasa programing. Namun disini nanti kita akan mengkombinasikan JavaScript RegExp, JavaScript replace. Jadi kalau memang belum mengerti keduanya silahkan sedikit nikmatin saja.

JavaScript RegExp adalah metode pencarian dengan pattern tertentu dalam suatu string. Jadi nilai yang akan didapatkan akan sesuai dengan pattern yang diberikan.

JavaScript replace adalah metode mengganti string dengan string yang lain. Untuk hal ini mungkin bisa kita bahas nanti. Tapi sebelum di bahas alangkah baiknya anda belajar dulu JavaScript replace disini [ www.w3schools.com/jsref/jsref_replace.asp ]

Kedua metode tersebut dalam hal ini akan di gabungkan. Kita langsung saja menuju contoh scriptnya.

  1. <script>
  2. function bersihkan() {
  3. var tagDt = document.getElementById('tarea');
  4. tagDt.value = '';
  5. }
  6. function rubah() {
  7. var tagDt = document.getElementById('tarea');
  8. var dtTag = tagDt.value;
  9. dtTag = dtTag.replace(/&/g,"&amp;");
  10. dtTag = dtTag.replace(/'/g,"&#039;");
  11. dtTag = dtTag.replace(/"/g,"&quot;");
  12. dtTag = dtTag.replace(/</g,"&lt;");
  13. dtTag = dtTag.replace(/>/g,"&gt;");
  14. tagDt.value = dtTag ;
  15. };
  16. </script>
  17. <textarea cols="36" rows="5" id="tarea"></textarea><br/>
  18. <button onclick="rubah();" type="button">Convert</button>
  19. <button onclick="bersihkan();" type="button">Clear</button>
  1. Poin 2 : Pembuatan fungsi pembersihan object.
  2. Poin 3 dan poin 7: Pencarian object dengan ID tag tarea.
  3. Poin 4 dan poin 14: Pemberian nilai object dengan kosong.
  4. Poin 6 : Pembuatan fungsi pengubahan nilai object
  5. Poin 8 : Pengambilan nilai object tarea.
  6. Poin 9-13 : Penggantian string pattern tertentu dengan string lain.

Mungkin beberapa poin di atas ada yang kurang paham terutama untuk poin 9-13 yang memang paling penting disini. Untuk poin lain saya yakin sudah pada paham. Kita ambil sedikit kodenya dulu

  1. dtTag = dtTag.replace(/</g,"<lt;");

Kalau anda mau belajar dan memahami metode replace javascript saya yakin tidak akan mengalami masalah dengan script tersebut. Metode replace tersebut kalau di terjemahkan dalam bahasa manusia adalah mengganti string < menjadi &lt; secara global. Jadi disini bukan hanya mengganti string < yang pertama saja namun semua string tersebut dalam dtTag. Secara global ini ditandai dengan adanya RegExp /g. Berbeda jika metode yang digunakan adalah sebagai berikut

  1. dtTag = dtTag.replace("<","<lt;");

Coba sendiri pasti akan mengerti bedanya. Disini yang saya masukkan hanya beberapa karakter tag yang di replace. Anda bisa memasukkan karakter lain dalan fuction tersebut seperti dalam HTML ASCII Reference [ www.w3schools.com/tags/ref_ascii.asp ]

Komentar Cara Membuat Parse HTML Javascript

Jangan menaruh live link dikomentar dan sampai saat ini baru 2 komentar untuk update Cara Membuat Parse HTML Javascript dengan id 8080201432448234256.

Amien Melody

siiipp.....

18/2/13 23:15
hienzo

bingung gan :D

4/3/13 10:56