Ubah Semua Teks URL menjadi URL Aktif
Ubah semua karakter di dalam <body> yang cocok dengan pola teks URL menjadi tautan aktif:
// Detect links pattern
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
// Wrap the matched pattern with an anchor tag
$('body').html($('body').html().replace(exp, "<a href='$1'>$1</a>"));Sumber: Darcy Clarke - Make Text URLs Active
Pembaharuan 22 Februari 2013
Saya telah mengubah sedikit kode ini agar ketika pola exp cocok dengan URL yang merupakan tautan asli, ini tidak akan membuat tautan tersebut menjadi rusak seperti ini:
Dibandingkan mengganti string yang cocok menjadi tautan, akan lebih baik jika kita mengubahnya menjadi elemen <span> terlebih dahulu. Kemudian, ketika semua string yang telah cocok terbungkus oleh elemen <span>, singkirkan semua tautan asli yang mungkin membungkus elemen ini. Terakhir, cukup ganti semua elemen <span> menjadi <a>:
// Detect links pattern
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
// Wrap the matched strings with `<span class="fake-link"></span>`
$('body').html($('body').html().replace(exp, "<span class='fake-link'>$1</span>"));
$('.fake-link').each(function() {
// Extra job: Check if parent is an anchor
if ($(this).parent().is('a')) {
// If `true`, then unwrap the original anchor which has been written by default from `.fake-link`
$(this).unwrap();
}
// Replace `.fake-link` with an anchor tag
$(this).replaceWith('<a href="' + $(this).text() + '">' + $(this).text() + '</a>');
});Pembaharuan 25 Februari 2013
Yang ini lebih aman:
// http://jmrware.com/articles/2010/linkifyurl/linkify.html
// Replacement => '$1$4$7$10$13<a href="$2$5$8$11$14">$2$5$8$11$14</a>$3$6$9$12'
var isUrl = /(\()((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\))|(\[)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\])|(\{)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\})|(<|&(?:lt|#60|#x3c);)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(>|&(?:gt|#62|#x3e);)|((?:^|[^=\s'"\]])\s*['"]?|[^=\s]\s+)(\b(?:ht|f)tps?:\/\/[a-z0-9\-._~!$'()*+,;=:\/?#[\]@%]+(?:(?!&(?:gt|#0*62|#x0*3e);|&(?:amp|apos|quot|#0*3[49]|#x0*2[27]);[.!&',:?;]?(?:[^a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]|$))&[a-z0-9\-._~!$'()*+,;=:\/?#[\]@%]*)*[a-z0-9\-_~$()*+=\/#[\]@%])/img;Contoh Penggunaan
Karakter pengganti adalah berupa $1$4$7$10$13<a href="$2$5$8$11$14">$2$5$8$11$14</a>$3$6$9$12:
var txt = document.getElementById('text');
txt.innerHTML = txt.innerHTML.replace(isUrl, '$1$4$7$10$13<a href="$2$5$8$11$14">$2$5$8$11$14</a>$3$6$9$12');Labels: JavaScript, jQuery, Lanjutan, Potongan, Regex
16 Comments:
hihihi ternyata master hompimpa Taufiq Nurrohman tuh yah :D
By
Beben Koben, at Monday, March 12, 2012 at 5:46:00 PM GMT+7
kelemahannya apa gan kalo pake cara ini? mohon diperjelas lagi :)
terima kasih.
By
Yopi Hasopa, at Monday, March 12, 2012 at 7:31:00 PM GMT+7
@Yopi Hasopa Kelemahannya, kalau JavaScript didisable link tidak akan menjadi aktif. Apapun bentuknya, dimanapun tempatnya, cara manual masih akan tetap menjadi cara terbaik karena kitalah yang mengendalikan segala sesuatu, bukan komputer. Ini sebagai alternatif saja. Misalnya, jika kita berada di dalam sebuah forum, mungkin tangan kita akan capek jika harus menulis link dengan kode HTML. Dengan cara ini, kita tidak perlu mengetik tag <a>. Cukup ketik URLnya saja nanti saat diterbitkan akan berubah menjadi URL aktif. Selengkapnya bisa mempelajari dari link sumbernya, atau dari halaman demo.
By
Taufik Nurrohman, at Monday, March 12, 2012 at 8:29:00 PM GMT+7
@Taufik Nurrohman terima kasih gan pencerahannya, sangat membantu :)
By
Yopi Hasopa, at Monday, March 12, 2012 at 8:38:00 PM GMT+7
bang gimana klo bikin link kyk yg di facebook, klo di klik linknya berubah jadi gini contohnya http://www.facebook.com/l.php?u=http%3A%2F%2Fyoutu.be%2FuF56D6jg240&h=PAQHeFJCoAQH4C1UkvWdM_mRUeWvabYwN52PzVeX3oPFEgQ
By
Aldy, at Sunday, April 15, 2012 at 10:21:00 AM GMT+7
@Sadeva Aldy Pratama Kurang tahu sih. Itu sistem redirect dari Facebook pribadi. Jadi tidak bisa dibuat menggunakan JavaScript.
By
Taufik Nurrohman, at Sunday, April 15, 2012 at 11:05:00 AM GMT+7
@Taufik Nurrohman saya ingin ngubah semua link di blog saya jadi seperti ini http://alprablog.blogspot.com/p/iframe.html?iframe=hompimpaalaihumgambreng.blogspot.com
bsa ga mas?
By
Aldy, at Sunday, April 15, 2012 at 1:49:00 PM GMT+7
@Sadeva Aldy Pratama Bisa. Pakai saja .replace() untuk mengganti setiap akhir URL dengan ?iframe=hompimpaalaihumgambreng.blogspot.com
Demo: http://jsfiddle.net/tovic/9Dhdk/
$('a').each(function() {
$(this).attr('href', $(this).attr('href').replace(/$/g, "?iframe=hompimpaalaihumgambreng.blogspot.com"));
});
Ngomong-ngomong, buat apa ya? Hehe... :p
By
Taufik Nurrohman, at Sunday, April 15, 2012 at 2:58:00 PM GMT+7
@Taufik Nurrohman buat sya sndri bang, hehe
1 lg, ini pke jquery tambahan ga? maklum saya bari kenal dgn blog ini :D
By
Aldy, at Monday, April 16, 2012 at 9:29:00 PM GMT+7
@Sadeva Aldy Pratama Nggak perlu. Sekali saja sudah masang satu JQuery itu untuk selamanya.
By
Taufik Nurrohman, at Monday, April 16, 2012 at 11:56:00 PM GMT+7
@Taufik Nurrohman jquerynya yg mana mas?
By
Aldy, at Wednesday, April 18, 2012 at 8:26:00 PM GMT+7
klw kebalikannya gimana mas, kaya kolom komentar di blog ini "Link hidup dalam komentar akan terhapus secara otomatis" :D
By
al, at Tuesday, December 18, 2012 at 12:46:00 PM GMT+7
⇒ /2012/07/no-live-links.html
By
Taufik Nurrohman, at Friday, February 22, 2013 at 9:34:00 AM GMT+7
bermanfaat sekali untuk saya yang baru ada keinginan belajar jquery , walau memusingkan tapi mengasyikan bila tutorial nya seperti ini .. sangat membantu , terima kasih kang taufik ..
By
Kang Rian, at Tuesday, July 16, 2013 at 2:09:00 AM GMT+7
=p* kalau mengubah link menjadi html di belakangnya gimana bang ? :)
By
Bardil, at Sunday, July 13, 2014 at 6:24:00 AM GMT+7
good
By
Menthor Kita, at Wednesday, August 23, 2017 at 4:53:00 PM GMT+7
Post a Comment
<< Home