Ubah Semua Teks Url Menjadi Url Aktif - Dewa Blogger

Halaman

    Social Items

Buy Now
 yang cocok dengan rujukan teks URL menjadi tautan aktif Ubah Semua Teks URL menjadi URL Aktif

Ubah semua abjad di dalam <body> yang cocok dengan rujukan 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 isyarat ini semoga saat rujukan exp cocok dengan URL yang merupakan tautan asli, ini tidak akan menciptakan tautan tersebut menjadi rusak menyerupai ini:

 yang cocok dengan rujukan teks URL menjadi tautan aktif Ubah Semua Teks URL menjadi URL Aktif
Bukan hanya teks saja yang terbungkus oleh elemen <a>, tetapi nilai atribut src dari URL orisinil juga ikut terbungkus.

Dibandingkan mengganti string yang cocok menjadi tautan, akan lebih baik bila kita mengubahnya menjadi elemen <span> terlebih dahulu. Kemudian, saat semua string yang telah cocok terbungkus oleh elemen <span>, singkirkan semua tautan orisinil 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 ialah 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


Sumber https://www.dte.web.id/

Ubah Semua Teks Url Menjadi Url Aktif

 yang cocok dengan rujukan teks URL menjadi tautan aktif Ubah Semua Teks URL menjadi URL Aktif

Ubah semua abjad di dalam <body> yang cocok dengan rujukan 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 isyarat ini semoga saat rujukan exp cocok dengan URL yang merupakan tautan asli, ini tidak akan menciptakan tautan tersebut menjadi rusak menyerupai ini:

 yang cocok dengan rujukan teks URL menjadi tautan aktif Ubah Semua Teks URL menjadi URL Aktif
Bukan hanya teks saja yang terbungkus oleh elemen <a>, tetapi nilai atribut src dari URL orisinil juga ikut terbungkus.

Dibandingkan mengganti string yang cocok menjadi tautan, akan lebih baik bila kita mengubahnya menjadi elemen <span> terlebih dahulu. Kemudian, saat semua string yang telah cocok terbungkus oleh elemen <span>, singkirkan semua tautan orisinil 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 ialah 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


Sumber https://www.dte.web.id/