Как заменить простые URL ссылками?

Question

Я использую приведенную ниже функцию для сопоставления 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>"); 
}

Answer 1

Если вам нужно показать более короткую ссылку (только домен), но с таким же длинным 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>");
}

Answer 2

Следует отметить предупреждения о сложности URI, но простой ответ на ваш вопрос:
Чтобы заменить каждое совпадение, вам нужно добавить флаг /g в конец регулярного выражения:
/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

Answer 3

Рег. Пример: /(\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

Answer 4

Правильное обнаружение URL с поддержкой международных доменов и астральных символов - не тривиальная вещь. linkify-it библиотека строит регулярные выражения из многих условий , а окончательный размер составляет около 6 килобайт :). Это точнее, чем все библиотеки, на которые в настоящее время есть ссылка в принятом ответе.

См. linkify-it demo , чтобы проверить в реальном времени все крайние случаи и проверить свои.

Если вам нужно связать исходный код HTML, вам следует сначала проанализировать его и итерировать каждый текстовый токен отдельно.

Answer 5

Будьте проще! Скажите, что вы не можете иметь, а не то, что вы можете иметь:)

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

Таким образом, вместо того, чтобы иметь сложное регулярное выражение, которое не удовлетворяет всем крайним случаям, и будет трудно поддерживать, как насчет этого гораздо более простого, который хорошо работает на практике.

Match

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;

Answer 6

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

ссылка: https://github.com/alexcorvi/anchorme.js

Answer 7

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

простой пример

Answer 8

Попробуйте ниже решение

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

Answer 9

Попробуйте следующую функцию:

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

Answer 10

Вот мое решение:

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