Jak zastąpić zwykłe adresy URL linkami?

Korzystam z funkcji poniżej, aby dopasować adresy URL w danym tekście i zastąpić je linkami HTML. Wyrażenie regularne działa świetnie, ale obecnie zastępuję tylko pierwsze dopasowanie.

Jak mogę zastąpić cały adres URL? Wydaje mi się, że powinienem używać polecenia exec , ale tak naprawdę nie wymyśliłem, jak to zrobić.

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

Po pierwsze, rzutowanie własnego wyrażenia regularnego na parsowanie adresów URL to straszny pomysł . Musisz sobie wyobrazić, że jest to dość powszechny problem, że ktoś napisał, debugował i przetestował dla niego bibliotekę, zgodnie z RFC . Identyfikatory URI są złożone - sprawdź kod do analizowania adresów URL w Node.js i stronę Wikipedia na temat schematów URI .

Istnieje mnóstwo skrajnych przypadków, jeśli chodzi o parsowanie adresów URL: międzynarodowe nazwy domen , rzeczywiste ( .museum) vs. nieistniejące ( .etc) TLD, dziwna interpunkcja, w tym nawiasy , interpunkcja na końcu adresu URL, nazwy hostów IPV6 itp.

Szukałem na tonę z bibliotek , i istnieje kilka warto skorzystać pomimo pewnych wad:

• W linkach Soapboksa włożono w to poważny wysiłek, a poważny refaktor w czerwcu 2015 r. Usunął zależność jQuery . Nadal ma problemy z IDN .
• AnchorMe to nowicjusz, który twierdzi, że jest szybszy i szczuplejszy. Niektóre problemy z IDN .
• Autolinker.js wymienia cechy bardzo szczegółowo (np. „Prawidłowo obsłuży dane wejściowe HTML. Narzędzie nie zmieni hrefatrybutu wewnątrz tagów anchor ()” ). Rzucę na to kilka testów, gdy będzie dostępna wersja demonstracyjna .

Biblioteki, które zdyskwalifikowałem szybko za to zadanie:

• Adres URL Django nie obsługiwał poprawnie niektórych TLD (oto oficjalna lista prawidłowych TLD . Brak wersji demonstracyjnej .
• autolink-js nie wykryłby „www.google.com” bez http: //, więc nie nadaje się do automatycznego łączenia „zwykłych adresów URL” (bez schematu / protokołu) w postaci zwykłego tekstu.
• Linkify Bena Almana nie są utrzymywane od 2009 roku.

Jeśli nalegasz na wyrażenie regularne, najbardziej wyczerpującym jest wyrażenie regularne URL z komponentu , chociaż fałszywie wykryje niektóre nieistniejące dwuliterowe domeny TLD, patrząc na nie.

Zastępowanie adresów URL linkami (odpowiedź na ogólny problem)

Wyrażenie regularne w pytaniu pomija wiele przypadkowych przypadków. Podczas wykrywania adresów URL zawsze lepiej jest używać specjalistycznej biblioteki, która obsługuje międzynarodowe nazwy domen, nowe TLD, takie jak .museum, nawiasy i inne znaki interpunkcyjne w adresie URL i na końcu oraz wiele innych przypadków na krawędzi. Zobacz post na blogu Jeffa Atwooda Problem z adresami URL, aby uzyskać wyjaśnienie niektórych innych problemów.

Najlepsze podsumowanie bibliotek pasujące URL jest Dan Dăscălescu na Odpowiedź
(od lutego 2014)

„Spraw, aby wyrażenie regularne zastępowało więcej niż jedno dopasowanie” (odpowiedź na konkretny problem)

Dodaj „g” na końcu wyrażenia regularnego, aby umożliwić dopasowanie globalne:

/ig;

Ale to tylko rozwiązuje problem w pytaniu, w którym wyrażenie regularne zastępowało tylko pierwsze dopasowanie. Nie używaj tego kodu.

Wprowadziłem kilka drobnych modyfikacji w kodzie Travisa (aby uniknąć niepotrzebnej ponownej deklaracji - ale działa świetnie na moje potrzeby, więc dobra robota!):

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

Dokonałem pewnych optymalizacji Linkify()powyższego kodu Travisa . Naprawiłem również błąd polegający na tym, że adresy e-mail z formatami typów poddomen nie były dopasowane (np. Przykład@domena.co.uk).

Ponadto zmieniłem implementację na prototypowanie Stringklasy, aby elementy można było dopasować w następujący sposób:

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

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

Tak czy inaczej, oto skrypt:

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

Dzięki, to było bardzo pomocne. Chciałem też czegoś, co łączyłoby rzeczy, które wyglądały jak adresy URL - jako podstawowy wymóg łączyłoby coś takiego jak www.yahoo.com, nawet jeśli prefiks protokołu http: // nie był obecny. Zasadniczo, jeśli „www”. jest obecny, połączy go i przyjmie, że to http: //. Chciałem też, aby wiadomości e-mail zamieniły się w mailto: linki. PRZYKŁAD: www.yahoo.com zostanie przekonwertowany na www.yahoo.com

Oto kod, na którym się skończyłem (kombinacja kodu z tej strony i innych rzeczy, które znalazłem online i innych rzeczy, które zrobiłem sam):

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
}

W drugim zastępowaniu część (^ | [^ /]) zastępuje www.whokolwiek.com tylko wtedy, gdy nie jest poprzedzona przedrostkiem // - aby uniknąć podwójnego linkowania, jeśli adres URL był już połączony przy pierwszej zamianie. Możliwe jest również, że www.whokolwiek.com może znajdować się na początku łańcucha, co jest pierwszym warunkiem „lub” w tej części wyrażenia regularnego.

Można to zintegrować jako wtyczkę jQuery, jak zilustrowano powyżej Jesse P. - ale szczególnie chciałem regularnej funkcji, która nie działałaby na istniejącym elemencie DOM, ponieważ pobieram tekst, który mam, a następnie dodam go do DOM, i Chcę, aby tekst był „linkified” przed dodaniem go, więc przekazuję tekst przez tę funkcję. Działa świetnie.

Identyfikacja adresów URL jest trudna, ponieważ często są otoczone znakami interpunkcyjnymi i ponieważ użytkownicy często nie używają pełnej formy adresu URL. Istnieje wiele funkcji JavaScript służących do zastępowania adresów URL hiperłączami, ale nie udało mi się znaleźć takiej, która działałaby tak dobrze, jak urlizefiltr w opartym na języku Python frameworku Django. Dlatego przeniosłem urlizefunkcję Django do JavaScript:

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

Przykład:

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

Drugi argument, jeśli jest prawdziwy, powoduje rel="nofollow"wstawienie. Trzeci argument, jeśli jest prawdziwy, unika znaków, które mają specjalne znaczenie w HTML. Zobacz plik README .

Wprowadziłem zmianę w Roshambo String.linkify () w emailAddressPattern, aby rozpoznać adresy 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>');
    };
}

Szukałem w Google czegoś nowego i natknąłem się na ten:

$('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/

Działa naprawdę dobrze dla normalnych linków.

Najlepszy skrypt do tego: http://benalman.com/projects/javascript-linkify-process-lin/

To rozwiązanie działa jak wiele innych i faktycznie używa tego samego wyrażenia regularnego co jedno z nich, jednak zamiast zwracania ciągu HTML zwróci fragment dokumentu zawierający element A i wszelkie odpowiednie węzły tekstowe.

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

Istnieją pewne zastrzeżenia, a mianowicie ze starszą obsługą IE i textContent.

tutaj jest demo.

Jeśli chcesz pokazać krótszy link (tylko domenę), ale z tym samym długim adresem URL, możesz wypróbować moją modyfikację wersji kodu Sama Haslera opublikowanej powyżej

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

Poniżej kilka testowanych ciągów:

1. Znajdź mnie na www.google.com
2. www
3. Znajdź mnie na www. http://www.com
4. Śledź mnie na: http://www.nishantwork.wordpress.com
5. http://www.nishantwork.wordpress.com
6. Obserwuj mnie na : http://www.nishantwork.wordpress.com
7. https://stackoverflow.com/users/430803/nishant

Uwaga: jeśli nie chcesz przekazać wwwpoprawnego, użyj poniższej opcji reg np: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig

Należy zauważyć ostrzeżenia o złożoności URI, ale prosta odpowiedź na twoje pytanie brzmi:
aby zastąpić każde dopasowanie, musisz dodać /gflagę na końcu 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/>(");
}

prosty przykład

Nie komplikuj! Powiedz to, czego nie możesz mieć, niż to, co możesz mieć :)

Jak wspomniano powyżej, adresy URL mogą być dość złożone, szczególnie po „?”, I nie wszystkie zaczynają się od „www”. na przykładmaps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

Więc zamiast skomplikowanego wyrażenia regularnego, które nie spełnia wszystkich przypadków brzegowych i będzie trudne do utrzymania, co powiesz na ten o wiele prostszy, który działa dobrze dla mnie w praktyce.

Mecz

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

www. (anything but a space)+

Gdzie „cokolwiek” jest [^'"<>\s] ... w zasadzie zachłannym dopasowaniem, kontynuowanie spotkania, cytatu, nawiasu kątowego lub końca linii

Również:

Pamiętaj, aby sprawdzić, czy nie jest już w formacie URL, np. Tekst zawiera href="..."lubsrc="..."

Dodaj ref = nofollow (w razie potrzeby)

To rozwiązanie nie jest tak „dobre” jak wspomniane powyżej biblioteki, ale jest znacznie prostsze i działa dobrze w praktyce.

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;

Prawidłowe wykrywanie adresów URL z obsługą domen międzynarodowych i znaków astralnych nie jest trywialne. linkify-itbiblioteka buduje wyrażenia regularne z wielu warunków , a końcowy rozmiar to około 6 kilobajtów :). Jest dokładniejszy niż wszystkie biblioteki lib, obecnie przywoływane w zaakceptowanej odpowiedzi.

Zobacz linki demo-it aby sprawdzić na żywo wszystkie przypadki Edge i przetestować swoje.

Jeśli potrzebujesz linkować źródło HTML, powinieneś go najpierw przeanalizować i powtórzyć każdy token tekstowy osobno.

Napisałem kolejną bibliotekę JavaScript, może być dla ciebie lepsza, ponieważ jest bardzo wrażliwa z najmniej możliwą liczbą fałszywych trafień, szybka i ma niewielkie rozmiary. Obecnie aktywnie go utrzymuję, więc przetestuj go na stronie demonstracyjnej i sprawdź, jak by to działało.

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

Musiałem zrobić coś przeciwnego i zrobić linki HTML tylko w adresie URL, ale zmodyfikowałem wyrażenie regularne i działa jak urok, dzięki :)

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

source = source.replace (exp, „$ 1”);

Wykrywanie wiadomości e-mail w powyższej odpowiedzi Travitrona nie działało dla mnie, więc rozszerzyłem / zastąpiłem go następującym kodem (kod 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);

Pozwala to na adresy e-mail, takie jak „ imię.nazwisko@one.two.three.co.uk ”.

Po wejściu z kilku źródeł mam teraz rozwiązanie, które działa dobrze. Miało to związek z pisaniem własnego kodu zastępczego.

Odpowiedź .

Fiddle .

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

Zamień adresy URL w tekście na linki HTML, zignoruj ​​adresy URL w tagu href / pre. https://github.com/JimLiu/auto-link

Oto moje rozwiązanie:

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

Wypróbuj poniższą funkcję:

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

Wypróbuj poniższe rozwiązanie

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