Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Ubah Semua Teks URL menjadi URL Aktif

Uniform Resource Locator

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>"));

Lihat Demo


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:

JavaScript Conflict
Bukan hanya teks saja yang terbungkus oleh elemen <a>, tetapi nilai atribut src dari URL asli juga ikut terbungkus.

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>');
});

Revisi Demo

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');

Lihat Demo

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 16 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!