Як замінити прості URL-адреси посиланнями?

Я використовую функцію нижче, щоб співставити URL-адреси всередині певного тексту та замінити їх на HTML-посилання. Регулярний вираз працює чудово, але наразі я замінюю лише перший матч.

Як я можу замінити всю URL-адресу? Я думаю, я повинен використовувати команду exec , але я не дуже зрозумів, як це зробити.

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

По-перше, жахлива ідея прокатки власного регулярного выраження для розбору URL-адрес . Ви повинні уявити, що це досить поширена проблема, що хтось написав, налагодив і перевірив бібліотеку для неї, згідно з даними RFC . URI є складними - ознайомтеся з кодом для розбору URL-адрес у Node.js та на сторінці Вікіпедії на схемах URI .

Існує безліч випадкових випадків, коли мова йде про розбір URL-адрес: міжнародні доменні імена , фактичні ( .museum) проти неіснуючих ( .etc) TLD, дивні пунктуації, включаючи дужки , пунктуацію в кінці URL-адреси, імена хостів IPV6 тощо.

Я подивився на тонну в бібліотеках , і є кілька варто використовувати , незважаючи на деякі мінуси:

• У програмі linkify Soapbox було вкладено серйозні зусилля, і головний рефактор у червні 2015 року усунув залежність від jQuery . У нього все ще є проблеми з ІДН .
• AnchorMe - новачок, який стверджує, що він швидший і швидший . Деякі проблеми IDN також.
• Autolinker.js перераховує функції дуже конкретно (наприклад, "Правильно оброблятиме введення HTML. Утиліта не змінить hrefатрибут усередині тегів anchor ()" . Я підкину кілька тестів, коли демонстрація стане доступною .

Бібліотеки, які я швидко дискваліфікував для цього завдання:

• Урлінг Джанго не обробляв певні TLD належним чином (ось офіційний список дійсних TLD . Немає демонстрації .
• autolink-js не розпізнає "www.google.com" без http: //, тому це не зовсім підходить для автоматичного посилання на "випадкові URL-адреси" (без схеми / протоколу), знайдені у простому тексті.
• Зв'язки Бена Альмана не підтримуються з 2009 року.

Якщо ви наполягаєте на регулярному виразі, найбільш вичерпним є URL-регепс від Component , хоча він помилково виявить деякі неіснуючі двобуквенні TLD, дивлячись на нього.

Заміна URL-адрес посиланнями (відповідь на загальну проблему)

Регулярний вираз у питанні пропускає безліч крайніх випадків. Виявляючи URL-адреси, завжди краще використовувати спеціалізовану бібліотеку, яка обробляє міжнародні доменні імена, нові TLD, наприклад .museum, дужки та інші пунктуаційні знаки в межах та в кінці URL-адреси, та багато інших кращих справ. Дивіться публікацію в блозі Джеффа Етвуда Проблема з URL-адресами для пояснення деяких інших проблем.

Найкраще резюме узгоджувальних бібліотек URL в Відповідь Dan Dăscălescu в
(станом на лютий 2014 роки)

"Зробити регулярний вираз замінити більше однієї відповідності" (Відповідь на конкретну проблему)

Додайте "g" до кінця регулярного виразу, щоб увімкнути глобальну відповідність:

/ig;

Але це лише вирішує проблему в питанні, коли регулярний вираз заміняв лише першу відповідність. Не використовуйте цей код.

Я вніс кілька невеликих змін до коду Тревіса (просто щоб уникнути зайвих передекларацій - але він чудово працює для моїх потреб, така приємна робота!):

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

Linkify()Вище провели оптимізацію коду Травіса . Я також виправив помилку, коли адреси електронної пошти з форматами піддоменного типу не відповідали (наприклад, example@domain.co.uk).

Крім того, я змінив реалізацію на прототип Stringкласу, щоб елементи можна було зіставити так:

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

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

У будь-якому випадку, ось сценарій:

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

Дякую, це було дуже корисно. Я також хотів щось, що пов'язувало б речі, схожі на URL - як основна вимога, воно пов'язувало б щось на зразок www.yahoo.com, навіть якщо префіксу протоколу http: // немає. Так в основному, якщо "www." присутній, він зв’яже це і припустить, що це http: //. Я також хотів, щоб електронні листи перетворилися на mailto: посилання. ПРИКЛАД: www.yahoo.com буде перетворений на www.yahoo.com

Ось код, який я закінчив (поєднання коду на цій сторінці та інших речей, які я знайшов в Інтернеті, та інших речей, які я робив самостійно):

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
}

У другій заміні частина (^ | [^ /]) замінює www.wever.com лише тоді, коли вона не є префіксом // - щоб уникнути подвійного посилання, якщо URL-адреса вже була пов’язана в першій заміні. Крім того, можливо, що www.wwhat.com може бути на початку рядка, що є першою умовою "або" у цій частині регулярного виразів.

Це може бути інтегровано як плагін jQuery, як показано вище Jesse P - але я спеціально хотів регулярної функції, яка не діяла на існуючий елемент DOM, тому що я беру текст, який я маю, а потім додаю його до DOM, і Я хочу, щоб текст був "зв'язаний" перед тим, як додати його, тому я передаю текст через цю функцію. Чудово працює.

Ідентифікувати URL-адреси складно, оскільки вони часто оточені пунктуаційними знаками і тому, що користувачі часто не використовують повну форму URL-адреси. Існує багато функцій JavaScript для заміни URL-адрес гіперпосиланнями, але мені не вдалося знайти таку, яка працює, а також urlizeфільтр у веб-рамках Django на основі Python. Тому я переніс urlizeфункцію Django в JavaScript:

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

Приклад:

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

Другий аргумент, якщо істинний, викликає rel="nofollow"вставлення. Третій аргумент, якщо це правда, уникає символів, які мають особливе значення в HTML. Дивіться файл README .

Я змінив Roshambo String.linkify () на emailAddressPattern, щоб розпізнати адреси 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>');
    };
}

Я шукав у Google щось нове і наткнувся на цей:

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

демо: http://jsfiddle.net/kachibito/hEgvc/1/

Працює дуже добре для нормальних посилань.

Найкращий сценарій для цього: http://benalman.com/projects/javascript-linkify-process-lin/

Це рішення працює, як і багато інших, і фактично використовує той же регулярний вираз, що і один з них, однак замість повернення рядка HTML це поверне фрагмент документа, що містить елемент A та будь-які застосовні текстові вузли.

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

Існують деякі застереження, а саме зі старшою підтримкою IE та textContent.

ось демонстрація.

Якщо вам потрібно показати коротше посилання (лише домен), але з такою ж довгою URL-адресою, ви можете спробувати мою модифікацію версії коду Сема Хаслера, розміщену вище

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

Рег. 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>");
}

Нижче наведено кілька тестованих рядків:

1. Знайдіть мене на www.google.com
2. www
3. Знайдіть мене на www. http://www.com
4. Слідкуйте за мною: http://www.nishantwork.wordpress.com
5. http://www.nishantwork.wordpress.com
6. Слідкуйте за мною: http://www.nishantwork.wordpress.com
7. https://stackoverflow.com/users/430803/nishant

Примітка. Якщо ви не хочете перейти wwwяк дійсний, просто скористайтеся нижче reg ex: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig

Попередження про складність URI слід зазначити, але проста відповідь на ваше запитання:
Щоб замінити кожну відповідність, потрібно додати /gпрапор до кінця 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/>(");
}

простий приклад

Не ускладнювати! Скажіть, що ви не можете мати, а не те, що ви можете мати :)

Як було сказано вище, URL-адреси можуть бути досить складними, особливо після "?", І не всі вони починаються з "www". напрmaps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

Отже, а не мати складний регулярний вираз, який не відповідає всім крайовим випадкам, і його важко буде підтримувати, як щодо цього набагато простішого, який добре працює для мене.

Матч

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

www. (anything but a space)+

Де "що-небудь" - [^'"<>\s] це в основному жадібна відповідність, що веде до вас пробіл, цитату, кутову дужку або кінець рядка

Також:

Не забудьте перевірити, чи він вже не у форматі URL, наприклад, текст містить href="..."абоsrc="..."

Додати ref = nofollow (якщо потрібно)

Це рішення не настільки «добре», як вищезгадані бібліотеки, але набагато простіше і добре працює на практиці.

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;

Правильне виявлення URL-адрес з міжнародними доменами та підтримкою астральних символів - це не дрібниця. linkify-itБібліотека будує регулярні вирази з багатьох умов , а кінцевий розмір становить близько 6 кілобайт :). Це точніше за всі лібси, на які в даний час посилається прийнята відповідь.

Перегляньте демонстраційну версію linkify-it, щоб перевірити всі випадки реального життя та перевірити свої.

Якщо вам потрібно зв’язати джерело HTML, слід спершу проаналізувати його та повторити кожен маркер тексту окремо.

Я написав ще одну бібліотеку JavaScript, можливо, це буде для вас краще, оскільки вона дуже чутлива з найменшими можливими помилковими позитивами, швидкими та малими розмірами. В даний час я активно підтримую його, тому, будь ласка, протестуйте його на демонстраційній сторінці і подивіться, як він буде працювати для вас.

посилання: https://github.com/alexcorvi/anchorme.js

Мені довелося зробити навпаки, і ввести HTML-посилання просто в URL-адресу, але я змінив ваш регулярний вираз, і він працює як шарм, дякую :)

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

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

Виявлення електронної пошти у відповіді Травітрона вище для мене не працювало, тому я продовжив / замінив її наступним (код 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);

Це дозволяє отримувати адреси електронної пошти типу " firstname.secondname@one.two.three.co.uk ".

Після введення інформації з декількох джерел я тепер вирішив, що добре працює. Це було пов'язано з написанням власного коду заміни.

Відповідь .

Скрипка .

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

Замініть URL-адреси в тексті HTML-посиланнями, ігноруйте URL-адреси в межах тегу href / pre. https://github.com/JimLiu/auto-link

Ось моє рішення:

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

Спробуйте виконати наступну функцію:

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

Спробуйте нижче рішення

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