Bagaimana cara mengganti URL biasa dengan tautan?

Saya menggunakan fungsi di bawah ini untuk mencocokkan URL di dalam teks yang diberikan dan menggantinya dengan tautan HTML. Ekspresi reguler berfungsi dengan baik, tetapi saat ini saya hanya mengganti pertandingan pertama.

Bagaimana saya bisa mengganti semua URL? Saya kira saya harus menggunakan perintah exec , tapi saya tidak benar-benar mencari cara untuk melakukannya.

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

Pertama, menggulirkan regexp Anda sendiri untuk mem-parsing URL adalah ide yang buruk . Anda harus membayangkan ini adalah masalah yang cukup umum bahwa seseorang telah menulis, men-debug dan menguji perpustakaan untuk itu, menurut RFC . URI rumit - lihat kode untuk parsing URL di Node.js dan halaman Wikipedia tentang skema URI .

Ada satu ton kasus tepi dalam hal mem-parsing URL: nama domain internasional , aktual ( .museum) vs tidak ada ( .etc) TLD, tanda baca aneh termasuk tanda kurung , tanda baca di akhir URL, nama host IPV6 dll.

Saya telah melihat satu ton dari perpustakaan , dan ada senilai beberapa menggunakan meskipun beberapa kelemahan:

• Soapbox ini linkify telah melihat beberapa usaha put serius ke dalamnya, dan sebuah refactor besar di Juni 2015 dihapus ketergantungan jQuery . Itu masih memiliki masalah dengan IDNs .
• AnchorMe adalah pendatang baru yang mengklaim lebih cepat dan lebih ramping. Beberapa masalah IDN juga.
• Autolinker.js mencantumkan fitur dengan sangat spesifik (mis. "Akan menangani input HTML dengan benar. Utilitas tidak akan mengubah hrefatribut di dalam tag anchor ()" ). Saya akan melakukan beberapa tes ketika demo tersedia .

Perpustakaan yang saya diskualifikasi dengan cepat untuk tugas ini:

• Urlize Django tidak menangani TLD tertentu dengan benar (berikut adalah daftar resmi TLD yang valid . Tidak ada demo .
• tautan otomatis-js tidak akan mendeteksi "www.google.com" tanpa http: //, jadi tidak cocok untuk tautan otomatis "URL kasual" (tanpa skema / protokol) yang ditemukan dalam teks biasa.
• Tautan Ben Alman belum dipertahankan sejak 2009.

Jika Anda bersikeras pada ekspresi reguler, yang paling komprehensif adalah regexp URL dari Component , meskipun itu akan mendeteksi beberapa TLD dua huruf yang tidak ada dengan melihatnya.

Mengganti URL dengan tautan (Jawab untuk Masalah Umum)

Ekspresi reguler dalam pertanyaan kehilangan banyak kasus tepi. Saat mendeteksi URL, selalu lebih baik menggunakan perpustakaan khusus yang menangani nama domain internasional, seperti TLD baru .museum, tanda kurung dan tanda baca lainnya di dalam dan di akhir URL, dan banyak kasus tepi lainnya. Lihat posting blog Jeff Atwood The Problem With URLs untuk penjelasan tentang beberapa masalah lainnya.

The Ringkasan terbaik dari perpustakaan pencocokan URL dalam Dan Dascalescu ini Jawaban
(per Feb 2014)

"Buat ekspresi reguler ganti lebih dari satu kecocokan" (Jawab untuk masalah tertentu)

Tambahkan "g" ke akhir ekspresi reguler untuk mengaktifkan pencocokan global:

/ig;

Tapi itu hanya memperbaiki masalah di pertanyaan di mana ekspresi reguler hanya menggantikan pertandingan pertama. Jangan gunakan kode itu.

Saya telah membuat beberapa modifikasi kecil pada kode Travis (hanya untuk menghindari deklarasi ulang yang tidak perlu - tetapi ini berfungsi baik untuk kebutuhan saya, pekerjaan yang sangat bagus!):

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText;
}

Buat beberapa optimasi pada Linkify()kode Travis di atas. Saya juga memperbaiki bug di mana alamat email dengan format tipe subdomain tidak akan cocok (yaitu example@domain.co.uk).

Selain itu, saya mengubah implementasinya menjadi prototipe Stringkelas sehingga item dapat dicocokkan seperti:

var text = 'address@example.com';
text.linkify();

'http://stackoverflow.com/'.linkify();

Bagaimanapun, ini skripnya:

if(!String.linkify) {
    String.prototype.linkify = function() {

        // http://, https://, ftp://
        var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

        // www. sans http:// or https://
        var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

        // Email addresses
        var emailAddressPattern = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;

        return this
            .replace(urlPattern, '<a href="$&">$&</a>')
            .replace(pseudoUrlPattern, '$1<a href="http://$2">$2</a>')
            .replace(emailAddressPattern, '<a href="mailto:$&">$&</a>');
    };
}

Terima kasih, ini sangat membantu. Saya juga menginginkan sesuatu yang akan menautkan hal-hal yang tampak seperti URL - sebagai persyaratan dasar, itu akan menautkan sesuatu seperti www.yahoo.com, bahkan jika awalan http: // protokol tidak ada. Jadi pada dasarnya, jika "www." ada, itu akan menautkannya dan menganggap itu http: //. Saya juga ingin email berubah menjadi mailto: tautan. CONTOH: www.yahoo.com akan dikonversi ke www.yahoo.com

Inilah kode yang akhirnya saya dapatkan (kombinasi kode dari halaman ini dan hal-hal lain yang saya temukan online, dan hal-hal lain yang saya lakukan sendiri):

function Linkify(inputText) {
    //URLs starting with http://, https://, or ftp://
    var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    var replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with www. (without // before it, or it'd re-link the ones done above)
    var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    var replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links
    var replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
    var replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText
}

Di ganti ke-2, bagian (^ | [^ /]) hanya menggantikan www.wh whatever.com jika belum diawali oleh // - untuk menghindari penautan ganda jika URL sudah ditautkan pada penggantian pertama. Juga, mungkin saja www.wh whatever.com mungkin berada di awal string, yang merupakan kondisi "atau" pertama di bagian regex tersebut.

Ini dapat diintegrasikan sebagai plugin jQuery seperti yang diilustrasikan oleh Jesse P di atas - tetapi saya secara khusus menginginkan fungsi reguler yang tidak bekerja pada elemen DOM yang ada, karena saya mengambil teks yang saya miliki dan kemudian menambahkannya ke DOM, dan Saya ingin teks menjadi "ditautkan" sebelum saya menambahkannya, jadi saya meneruskan teks melalui fungsi ini. Bagus sekali.

Mengidentifikasi URL itu rumit karena sering dikelilingi oleh tanda baca dan karena pengguna sering tidak menggunakan bentuk lengkap dari URL. Banyak fungsi JavaScript ada untuk mengganti URL dengan hyperlink, tapi saya tidak dapat menemukan yang berfungsi serta urlizefilter dalam kerangka kerja web Django yang berbasis Python. Karena itu saya memindahkan urlizefungsi Django ke JavaScript:

https://github.com/ljosa/urlize.js

Sebuah contoh:

urlize('Go to SO (stackoverflow.com) and ask. <grin>', 
       {nofollow: true, autoescape: true})
=> "Go to SO (<a href="http://stackoverflow.com" rel="nofollow">stackoverflow.com</a>) and ask. &lt;grin&gt;"

Argumen kedua, jika benar, menyebabkan rel="nofollow"dimasukkan. Argumen ketiga, jika benar, lolos dari karakter yang memiliki arti khusus dalam HTML. Lihat file README .

Saya membuat perubahan ke Roshambo String.linkify () ke emailAddressPattern untuk mengenali alamat aaa.bbb. @ Ccc.ddd

if(!String.linkify) {
    String.prototype.linkify = function() {

        // http://, https://, ftp://
        var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

        // www. sans http:// or https://
        var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

        // Email addresses *** here I've changed the expression ***
        var emailAddressPattern = /(([a-zA-Z0-9_\-\.]+)@[a-zA-Z_]+?(?:\.[a-zA-Z]{2,6}))+/gim;

        return this
            .replace(urlPattern, '<a target="_blank" href="$&">$&</a>')
            .replace(pseudoUrlPattern, '$1<a target="_blank" href="http://$2">$2</a>')
            .replace(emailAddressPattern, '<a target="_blank" href="mailto:$1">$1</a>');
    };
}

Saya mencari di Google untuk sesuatu yang lebih baru dan menemukan ini:

$('p').each(function(){
   $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') );
});

demo: http://jsfiddle.net/kachibito/hEgvc/1/

Bekerja sangat baik untuk tautan normal.

Script terbaik untuk melakukan ini: http://benalman.com/projects/javascript-linkify-process-lin/

Solusi ini berfungsi seperti yang lain, dan pada kenyataannya menggunakan regex yang sama seperti salah satu dari mereka, namun sebagai ganti mengembalikan HTML String ini akan mengembalikan sebuah fragmen dokumen yang mengandung elemen A dan semua node teks yang berlaku.

 function make_link(string) {
    var words = string.split(' '),
        ret = document.createDocumentFragment();
    for (var i = 0, l = words.length; i < l; i++) {
        if (words[i].match(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi)) {
            var elm = document.createElement('a');
            elm.href = words[i];
            elm.textContent = words[i];
            if (ret.childNodes.length > 0) {
                ret.lastChild.textContent += ' ';
            }
            ret.appendChild(elm);
        } else {
            if (ret.lastChild && ret.lastChild.nodeType === 3) {
                ret.lastChild.textContent += ' ' + words[i];
            } else {
                ret.appendChild(document.createTextNode(' ' + words[i]));
            }
        }
    }
    return ret;
}

Ada beberapa peringatan, yaitu dengan IE yang lebih lama dan dukungan textContent.

di sini adalah demo.

Jika Anda perlu menunjukkan tautan yang lebih pendek (hanya domain), tetapi dengan URL panjang yang sama, Anda dapat mencoba modifikasi saya dari versi kode Sam Hasler yang diposting di atas

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp, "<a href='$1' target='_blank'>$3</a>");
}

Reg Ex: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]*)/ig

function UriphiMe(text) {
      var exp = /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]*)/ig; 
      return text.replace(exp,"<a href='$1'>$1</a>");
}

Berikut adalah beberapa string yang diuji:

1. Temukan saya di www.google.com
2. www
3. Temukan saya di www. http://www.com
4. Ikuti saya di: http://www.nishantwork.wordpress.com
5. http://www.nishantwork.wordpress.com
6. Ikuti saya di: http://www.nishantwork.wordpress.com
7. https://stackoverflow.com/users/430803/nishant

Catatan: Jika Anda tidak ingin lulus wwwsebagai valid, gunakan saja di bawah ini reg ex: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig

Peringatan tentang kompleksitas URI harus dicatat, tetapi jawaban sederhana untuk pertanyaan Anda adalah:
Untuk mengganti setiap kecocokan Anda perlu menambahkan /gbendera ke akhir RegEx:
/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

/**
 * Convert URLs in a string to anchor buttons
 * @param {!string} string
 * @returns {!string}
 */

function URLify(string){
  var urls = string.match(/(((ftp|https?):\/\/)[\-\w@:%_\+.~#?,&\/\/=]+)/g);
  if (urls) {
    urls.forEach(function (url) {
      string = string.replace(url, '<a target="_blank" href="' + url + '">' + url + "</a>");
    });
  }
  return string.replace("(", "<br/>(");
}

contoh sederhana

Tetap sederhana! Katakan apa yang tidak bisa Anda miliki, daripada apa yang bisa Anda miliki :)

Seperti disebutkan di atas, URL bisa sangat kompleks, terutama setelah '?', Dan tidak semuanya dimulai dengan 'www.' misalnyamaps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

Jadi, daripada memiliki regex kompleks yang tidak akan memenuhi semua kasus tepi, dan akan sulit untuk mempertahankan, bagaimana dengan yang jauh lebih sederhana ini, yang bekerja dengan baik untuk saya dalam praktik.

Pertandingan

http(s):// (anything but a space)+

www. (anything but a space)+

Di mana 'apa pun' berada [^'"<>\s] ... pada dasarnya pertandingan serakah, membawa Anda bertemu spasi, kutipan, braket sudut, atau akhir baris

Juga:

Ingatlah untuk memeriksa bahwa itu belum dalam format URL, misalnya teks berisi href="..." atausrc="..."

Tambahkan ref = nofollow (jika sesuai)

Solusi ini tidak sebagus perpustakaan yang disebutkan di atas, tetapi jauh lebih sederhana, dan bekerja dengan baik dalam praktiknya.

if html.match( /(href)|(src)/i )) {
    return html; // text already has a hyper link in it
    }

html = html.replace( 
            /\b(https?:\/\/[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='$1'>$1</a>" 
            );

html = html.replace( 
            /\s(www\.[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='http://$1'>$1</a>" 
            );

html = html.replace( 
             /^(www\.[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='http://$1'>$1</a>" 
            );

return html;

Deteksi URL yang benar dengan dukungan domain internasional & karakter astral bukanlah hal sepele. linkify-itperpustakaan membangun regex dari banyak kondisi , dan ukuran akhir sekitar 6 kilobyte :). Ini lebih akurat daripada semua lib, saat ini dirujuk dalam jawaban yang diterima.

Lihat demo linkify-it untuk memeriksa semua kasus tepi langsung dan menguji yang Anda miliki .

Jika Anda perlu menautkan sumber HTML, Anda harus menguraikannya terlebih dahulu, dan mengulangi setiap token teks secara terpisah.

Saya telah menulis pustaka JavaScript yang lain, mungkin lebih baik bagi Anda karena sangat peka dengan kemungkinan kesalahan seminimal mungkin, cepat dan kecil. Saya saat ini secara aktif memeliharanya jadi tolong lakukan pengujian di halaman demo dan lihat bagaimana itu akan bekerja untuk Anda.

tautan: https://github.com/alexcorvi/anchorme.js

Saya harus melakukan yang sebaliknya, dan membuat tautan html menjadi hanya URL, tapi saya memodifikasi regex Anda dan itu berfungsi seperti pesona, terima kasih :)

var exp = /<a\s.*href=['"[(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_ |!:,.;] * [- A-Z0-9 + & @ # \ /% = ~ _ |]) ['"]. *>. * <\ / A> / ig;

source = source.replace (exp, "$ 1");

Deteksi email dalam jawaban Travitron di atas tidak berfungsi untuk saya, jadi saya memperpanjang / menggantinya dengan yang berikut (kode C #).

// Change e-mail addresses to mailto: links.
const RegexOptions o = RegexOptions.Multiline | RegexOptions.IgnoreCase;
const string pat3 = @"([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,6})";
const string rep3 = @"<a href=""mailto:$1@$2.$3"">$1@$2.$3</a>";
text = Regex.Replace(text, pat3, rep3, o);

Ini memungkinkan alamat email seperti " firstname.secondname@one.two.three.co.uk ".

Setelah input dari beberapa sumber, sekarang saya sudah solusi yang bekerja dengan baik. Itu ada hubungannya dengan menulis kode pengganti Anda sendiri.

Jawaban .

Biola .

function replaceURLWithHTMLLinks(text) {
    var re = /(\(.*?)?\b((?:https?|ftp|file):\/\/[-a-z0-9+&@#\/%?=~_()|!:,.;]*[-a-z0-9+&@#\/%=~_()|])/ig;
    return text.replace(re, function(match, lParens, url) {
        var rParens = '';
        lParens = lParens || '';

        // Try to strip the same number of right parens from url
        // as there are left parens.  Here, lParenCounter must be
        // a RegExp object.  You cannot use a literal
        //     while (/\(/g.exec(lParens)) { ... }
        // because an object is needed to store the lastIndex state.
        var lParenCounter = /\(/g;
        while (lParenCounter.exec(lParens)) {
            var m;
            // We want m[1] to be greedy, unless a period precedes the
            // right parenthesis.  These tests cannot be simplified as
            //     /(.*)(\.?\).*)/.exec(url)
            // because if (.*) is greedy then \.? never gets a chance.
            if (m = /(.*)(\.\).*)/.exec(url) ||
                    /(.*)(\).*)/.exec(url)) {
                url = m[1];
                rParens = m[2] + rParens;
            }
        }
        return lParens + "<a href='" + url + "'>" + url + "</a>" + rParens;
    });
}

Ganti URL dalam teks dengan tautan HTML, abaikan URL dalam tag href / pre. https://github.com/JimLiu/auto-link

Inilah solusi saya:

var content = "Visit https://wwww.google.com or watch this video: https://www.youtube.com/watch?v=0T4DQYgsazo and news at http://www.bbc.com";
content = replaceUrlsWithLinks(content, "http://");
content = replaceUrlsWithLinks(content, "https://");

function replaceUrlsWithLinks(content, protocol) {
    var startPos = 0;
    var s = 0;

    while (s < content.length) {
        startPos = content.indexOf(protocol, s);

        if (startPos < 0)
            return content;

        let endPos = content.indexOf(" ", startPos + 1);

        if (endPos < 0)
            endPos = content.length;

        let url = content.substr(startPos, endPos - startPos);

        if (url.endsWith(".") || url.endsWith("?") || url.endsWith(",")) {
            url = url.substr(0, url.length - 1);
            endPos--;
        }

        if (ROOTNS.utils.stringsHelper.validUrl(url)) {
            let link = "<a href='" + url + "'>" + url + "</a>";
            content = content.substr(0, startPos) + link + content.substr(endPos);
            s = startPos + link.length;
        } else {
            s = endPos + 1;
        }
    }

    return content;
}

function validUrl(url) {
    try {
        new URL(url);
        return true;
    } catch (e) {
        return false;
    }
}

Coba fungsi di bawah ini:

function anchorify(text){
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  var text1=text.replace(exp, "<a href='$1'>$1</a>");
  var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
  return text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
}

alert(anchorify("Hola amigo! https://www.sharda.ac.in/academics/"));

Coba Solusi Di Bawah Ini

function replaceLinkClickableLink(url = '') {
let pattern = new RegExp('^(https?:\\/\\/)?'+
        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+
        '((\\d{1,3}\\.){3}\\d{1,3}))'+
        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+
        '(\\?[;&a-z\\d%_.~+=-]*)?'+
        '(\\#[-a-z\\d_]*)?$','i');

let isUrl = pattern.test(url);
if (isUrl) {
    return `<a href="${url}" target="_blank">${url}</a>`;
}
return url;
}