DTE :]

Friday, May 18, 2012

Regex untuk Mendeteksi URL Gambar

/(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/ig

Contoh Penerapan: Mengubah URL Gambar menjadi Gambar

Baris kode ini akan mengubah semua pola URL di dalam #comment-holder yang terdeteksi sebagai URL gambar dengan elemen <img> secara otomatis:

var content = document.getElementById('comment-holder').innerHTML;
    content = content.replace(/(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/ig, "<img src='$1' alt=''\/>");
document.getElementById('comment-holder').innerHTML = content;

Lihat Demo


Referensi: Regex Replace URL with Links

Labels: , , ,

8 Comments:

  • Regex itu apaan c ^_^
    kok kayak nama makanan yach!
    iwak regex..iwak regex...

    kabuuurrrr

    By Blogger Beben Koben, at Saturday, May 19, 2012 at 2:32:00 AM GMT+7  

  • Gimana ya cara saya mengganti kode ini

    <script type='text/javascript'>
    //<![CDATA[
    function replaceText(){if(!document.getElementById){return;}
    bodyText = document.getElementById("comment-holder");
    theText = bodyText.innerHTML;
    theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
    theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
    theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
    theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:500px;background:#FFF;padding:2px' src='");
    theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
    theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
    theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
    theText = theText.replace(/&amp;feature=/gi, "?rel=0' ");
    theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
    theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/");
    theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/");
    theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
    theText = theText.replace(/:\)\)/gi, "<img src='http://4.bp.blogspot.com/-sLWPs95In6M/T53hkfADCNI/AAAAAAAABnw/HqQ7VwncMec/s1600/ngguyu2.gif'/>");
    theText = theText.replace(/t\t/gi, "<img src='http://1.bp.blogspot.com/-4rYiGkLzgRw/T53hl1_vixI/AAAAAAAABn4/cwtGTENcdEY/s1600/tepuk+tangan.gif'/>");
    theText = theText.replace(/:d/gi, "<img src='http://1.bp.blogspot.com/-kGaP5gR4_nE/T53hS3q3xnI/AAAAAAAABmw/1yG-GVNojuw/s1600/buatD.gif'/>");
    theText = theText.replace(/:p/gi, "<img src='http://4.bp.blogspot.com/-vrrwL6W3HwM/T53hWop27TI/AAAAAAAABnA/0saIE7YOyDs/s1600/buatP.gif'/>");
    theText = theText.replace(/:\(\(/gi, "<img src='http://1.bp.blogspot.com/-yn6Vn6TYweQ/T53hd7GKM6I/AAAAAAAABng/zELrnPkqnLE/s1600/nangis2.gif'/>");
    theText = theText.replace(/:\)/gi, "<img src='http://3.bp.blogspot.com/-5qAQ2p_vS8Q/T53hgjDKSkI/AAAAAAAABno/T7kFIHffSyU/s1600/ngguyu.gif'/>");
    theText = theText.replace(/:\(/gi, "<img src='http://4.bp.blogspot.com/-AsHYLRE0OpM/T53hcKsiHwI/AAAAAAAABnY/jB5VV2pwhn0/s1600/nangis.gif'/>");
    theText = theText.replace(/:-\?/gi, "<img src='http://4.bp.blogspot.com/-B_7Y6ZakjpE/T53hYq87IyI/AAAAAAAABnI/KpGC6Yj6F2E/s1600/mikir.gif'/>");
    theText = theText.replace(/:m/gi, "<img src='http://1.bp.blogspot.com/-s0cmyAiQ5qU/T53hala5DBI/AAAAAAAABnQ/lK7NgnW4uic/s1600/minum+kopin+sambil+online.gif'/>");
    bodyText.innerHTML = theText;
    }replaceText();
    //]]>
    </script>
    </b:if>


    Dengan kode regex ini dan juga kode mengubah URL youtube menjadi video itu..?
    Jadi gak usah pake' tag tag_an lagi soalx banyak Error juga hadeuh

    By Blogger Sinto, at Saturday, May 19, 2012 at 7:58:00 AM GMT+7  

  • @system of blog Wadau percobaanQ errong :D COba lagi ah

    By Blogger Sinto, at Saturday, May 19, 2012 at 8:18:00 AM GMT+7  

  • @system of blog susah juga rupanya :)

    By Blogger Sinto, at Saturday, May 19, 2012 at 8:42:00 AM GMT+7  

  • @Beben Koben Regex = Regular Expression.
    Cari di kotak penelusuran blog ini, nanti akan ada banyak yang ditemukan (keterangan ditulis dalam tooltip).

    By Blogger Taufik Nurrohman, at Saturday, May 19, 2012 at 9:00:00 AM GMT+7  

  • @system of blog Kapan-kapan Saya buat dalam posting terpisah.

    By Blogger Taufik Nurrohman, at Saturday, May 19, 2012 at 9:01:00 AM GMT+7  

  • By Blogger Sinto, at Saturday, May 19, 2012 at 9:10:00 AM GMT+7  

  • Kang, maaf sebelumnya, saya nanya terus, dan sebenarnya ini sedikit OOT.

    Bagaimana caranya agar setiap link yang ditulis di postingan dapat menjadi link aktif?
    misalnya saya menulis ini:
    http://egg.endog/

    nah, secara otomatis akan berubah menjadi:
    <a href="http://egg.endog/">http://egg.endog/</a>

    Saya udah make cara yang mirip di atas, tapi tetep susah :Ozz

    By Blogger budkalon, at Friday, April 26, 2013 at 1:11:00 AM GMT+7  

Post a Comment



<< Home