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

Zamiana adresów URL na linki (odpowiedź na ogólny Problem)

Wyrażenie regularne w pytaniu pomija Wiele przypadków krawędzi. Podczas wykrywania adresów URL zawsze lepiej jest używać specjalistycznej biblioteki, która obsługuje międzynarodowe nazwy domen, nowe domeny TLD, takie jak .museum, nawiasy i inne znaki interpunkcyjne w obrębie i na końcu adresu URL oraz wiele innych przypadków brzegowych. Zobacz wpis na blogu Jeffa Atwooda Problem z adresami URL dla wyjaśnienia niektórych z innych problemy.

The best summary of URL matching libraries is in odpowiedź dana Dascalescu
(stan na Luty 2014)

" Make a regular expression replace more than one match "(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, gdzie wyrażenie regularne zastępowało tylko pierwsze mecz. nie używaj tego kodu.

Wprowadziłem kilka drobnych zmian w kodzie Travisa (aby uniknąć niepotrzebnej redeklaracji - 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;
}

Zrobiłem kilka optymalizacji do kodu Linkify() Travisa powyżej. Naprawiłem również błąd, w którym adresy e-mail z formatami typu subdomeny nie były dopasowane (tj. [email protected]).

Dodatkowo zmieniłem implementację na prototyp klasy String tak, aby elementy można było dopasować tak:

var text = '[email protected]';
text.linkify();

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

W każdym razie, oto scenariusz:

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 URL - jako podstawowe wymaganie, łączyłoby coś w rodzaju www.yahoo.com, nawet jeśli prefiks protokołu http:// nie był obecny. Więc w zasadzie, jeśli " www."jest obecny, połączy go i założy, że jest to http://. Chciałem również, aby e-maile zmieniły się w mailto: linki. Przykład: www.yahoo.com zostanie przeliczona na www.yahoo.com

Oto kod, z którym skończyłem (kombinacja kodu z tej strony i inne rzeczy, które znalazłem w Internecie, i inne 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 2. zastąp, część (^|[ ^ / ]) zastępuje tylko www.whatever.com jeśli nie jest już poprzedzony przez // -- aby uniknąć podwójnego linkowania, jeśli adres URL był już połączony w pierwszym zastąpieniu. Możliwe też, że www.whatever.com może znajdować się na początku łańcucha, który jest pierwszym warunkiem "or" w tej części wyrażenia regularnego.

To może być zintegrowane jako wtyczka jQuery jak Jesse P zilustrowano powyżej -- ale szczególnie chciałem regularną funkcję, która nie działa na istniejącym elemencie DOM, ponieważ biorę tekst, który mam, a następnie dodając 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ż są one często otoczone znakami interpunkcyjnymi i ponieważ użytkownicy często nie używają pełnej formy adresu URL. Istnieje wiele funkcji JavaScript do zastępowania adresów URL hiperłączami, ale nie udało mi się znaleźć takiego, który działa tak dobrze, jak filtr urlize w frameworku internetowym Django opartym na Pythonie. Dlatego przeportowałem funkcję Django urlize do JavaScript:

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

An 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 wstawienie rel="nofollow". Trzeci argument, jeśli jest prawdziwy, usuwa znaki, które mają specjalne znaczenie w HTML. Zobacz plik README .

Zmieniłem Stringi Roshambo.linkify() do emailAddressPattern, aby rozpoznać aaa.bbb.@ ccc.adresy 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>');
    };
}

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

Szukałam w google czegoś nowszego i natknęłam się na to:

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

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

 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, mianowicie ze starszymi OBSŁUGAMI IE i textContent.

Tutaj jest demo.

Jeśli chcesz pokazać krótszy link (tylko domena), ale z tym samym długim adresem URL, możesz wypróbować moją modyfikację wersji kodu sama Haslera zamieszczoną 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>");
}

Ostrzeżenia o złożoności URI należy zauważyć, ale prosta odpowiedź na twoje pytanie brzmi:
Aby zastąpić każde dopasowanie, musisz dodać flagę /g Na końcu wyrażenia regularnego:
/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

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 sprawdzonych ciągów:

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

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

Keep it simple! Powiedz to, czego nie możesz mieć, a nie to, co możesz mieć:)

Jak wspomniano powyżej, adresy URL mogą być dość złożone, zwłaszcza po'?', a nie wszystkie zaczynają się od ' www."np. maps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

Więc zamiast mieć złożone wyrażenia regularne, które nie spełniają wszystkich przypadków krawędzi i będą trudne do utrzymania, co powiesz na ten znacznie 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] ... zasadniczo w 2007 roku, po raz pierwszy w historii, pojawiła się nowa wersja gry, która została wydana na konsolę Xbox 360 i Xbox 360.]}

Także:

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

Dodaj ref=nofollow (jeśli dotyczy)

To rozwiązanie nie jest tak "dobre" jak wyżej wymienione 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;

Poprawne wykrywanie adresów URL z obsługą domen międzynarodowych i znaków Astralnych nie jest trywialną rzeczą. linkify-it biblioteka buduje regex z wielu warunków , a ostateczny rozmiar to około 6 kilobajtów :) . Jest bardziej dokładny niż wszystkie libs, do których obecnie odwołuje się accepted answer.

Zobacz Linkify-it demo {[3] } aby sprawdzić na żywo wszystkie przypadki edge i przetestować swoje.

Jeśli chcesz podlinkować źródło HTML, powinieneś najpierw je przeanalizować i iterację każdego tokena tekstowego osobno.

Napisałem kolejną bibliotekę JavaScript, może być lepiej dla Ciebie, ponieważ jest bardzo wrażliwy z najmniej fałszywych alarmów, szybki i mały rozmiar. Obecnie aktywnie go utrzymuję, więc proszę przetestować go na stronie demo i zobaczyć, jak to będzie działać dla Ciebie.

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

Musiałem zrobić odwrotnie, i zrobić linki html tylko URL, ale zmodyfikowałem Twoje regex 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 e-maili w powyższej odpowiedzi Travitrona nie zadziałało dla mnie, więc rozszerzyłem / zamieniłem go na następujący (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 typu " [email protected]".

Po wejściu z kilku źródeł mam teraz rozwiązanie, które działa dobrze. To miało związek z napisaniem 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;
    });
}

Zastąp adresy URL w tekście linkami HTML, ignoruj 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;
    }
}