¿Cómo reemplazar las URL simples con enlaces?

Estoy usando la siguiente función para hacer coincidir las URL dentro de un texto determinado y reemplazarlas por enlaces HTML. La expresión regular está funcionando muy bien, pero actualmente solo estoy reemplazando la primera coincidencia.

¿Cómo puedo reemplazar toda la URL? Supongo que debería estar usando el comando exec , pero realmente no pensé cómo hacerlo.

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

En primer lugar, rodar su propia expresión regular para analizar URL es una idea terrible . Debes imaginar que este es un problema lo suficientemente común como para que alguien haya escrito, depurado y probado una biblioteca, de acuerdo con los RFC . Los URI son complejos : consulte el código para el análisis de URL en Node.js y la página de Wikipedia sobre esquemas de URI .

Hay un montón de casos extremos cuando se trata de analizar URL: nombres de dominio internacionales, TLD reales ( .museum) vs. inexistentes ( .etc), puntuación extraña que incluye paréntesis , puntuación al final de la URL, nombres de host IPV6, etc.

He visto un montón de bibliotecas , y hay algunas que vale la pena usar a pesar de algunas desventajas:

• Linkify de Soapbox ha visto un esfuerzo serio puesto en ello, y un refactor importante en junio de 2015 eliminó la dependencia de jQuery . Todavía tiene problemas con los IDN .
• AnchorMe es un recién llegado que dice ser más rápido y delgado. Algunos problemas de IDN también.
• Autolinker.js enumera características muy específicamente (por ejemplo, " hrefManejará correctamente la entrada HTML. La utilidad no cambiará el atributo dentro de las etiquetas anchor ()" ). Lanzaré algunas pruebas cuando haya una demostración disponible .

Bibliotecas que he descalificado rápidamente para esta tarea:

• Urlize de Django no manejó ciertos TLD correctamente (aquí está la lista oficial de TLD válidos . Sin demo .
• autolink-js no detectaría "www.google.com" sin http: //, por lo que no es muy adecuado para vincular automáticamente "URL casuales" (sin un esquema / protocolo) que se encuentran en texto sin formato.
• El linkify de Ben Alman no se ha mantenido desde 2009.

Si insiste en una expresión regular, la más completa es la expresión regular de URL del Componente , aunque detectará falsamente algunos TLD de dos letras inexistentes al mirarla.

Reemplazo de URL con enlaces (Respuesta al problema general)

La expresión regular en la pregunta pierde muchos casos extremos. Al detectar URL, siempre es mejor usar una biblioteca especializada que maneje nombres de dominio internacionales, nuevos TLD .museum, paréntesis y otros signos de puntuación dentro y al final de la URL, y muchos otros casos extremos. Consulte la publicación del blog de Jeff Atwood El problema con las URL para obtener una explicación de algunos de los otros problemas.

El mejor resumen de las bibliotecas de coincidencia de URL se encuentra en la Respuesta de Dan Dascalescu
(a partir de febrero de 2014)

"Hacer que una expresión regular reemplace más de una coincidencia" (Respuesta al problema específico)

Agregue una "g" al final de la expresión regular para habilitar la coincidencia global:

/ig;

Pero eso solo soluciona el problema en la pregunta donde la expresión regular solo reemplazaba la primera coincidencia. No uses ese código.

He hecho algunas pequeñas modificaciones al código de Travis (solo para evitar cualquier redeclaración innecesaria, pero está funcionando muy bien para mis necesidades, ¡qué buen trabajo!):

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

Hice algunas optimizaciones al Linkify()código de Travis arriba. También solucioné un error en el que las direcciones de correo electrónico con formatos de tipo de subdominio no coincidían (es decir, [email protected]).

Además, cambié la implementación para Stringcrear un prototipo de la clase, de modo que los elementos puedan coincidir así:

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

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

De todos modos, aquí está el guión:

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

Gracias, esto fue muy útil. También quería algo que vinculara cosas que parecían una URL; como requisito básico, vincularía algo como www.yahoo.com, incluso si el prefijo de protocolo http: // no estaba presente. Básicamente, si "www". está presente, lo vinculará y asumirá que es http: //. También quería que los correos electrónicos se convirtieran en mailto: enlaces. EJEMPLO: www.yahoo.com se convertiría a www.yahoo.com

Aquí está el código con el que terminé (combinación de código de esta página y otras cosas que encontré en línea, y otras cosas que hice por mi cuenta):

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
}

En el segundo reemplazo, la parte (^ | [^ /]) solo reemplaza www.whatever.com si aún no tiene el prefijo // - para evitar la doble vinculación si una URL ya estaba vinculada en el primer reemplazo. Además, es posible que www.whatever.com esté al comienzo de la cadena, que es la primera condición "o" en esa parte de la expresión regular.

Esto podría integrarse como un complemento jQuery como lo ilustra Jesse P arriba, pero específicamente quería una función regular que no actuara en un elemento DOM existente, porque estoy tomando el texto que tengo y luego lo agrego al DOM, y Quiero que el texto se "vincule" antes de agregarlo, así que paso el texto a través de esta función. Funciona genial.

Identificar las URL es complicado porque a menudo están rodeadas de signos de puntuación y porque los usuarios con frecuencia no usan la forma completa de la URL. Existen muchas funciones de JavaScript para reemplazar las URL con hipervínculos, pero no pude encontrar una que funcione tan bien como el urlizefiltro en el marco web basado en Python Django. Por lo tanto, porté la urlizefunción de Django a JavaScript:

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

Un ejemplo:

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

El segundo argumento, si es verdadero, hace rel="nofollow"que se inserte. El tercer argumento, si es verdadero, escapa a los caracteres que tienen un significado especial en HTML. Ver el archivo README .

Realicé un cambio en Roshambo String.linkify () a la dirección de correo electrónico Dirección para reconocer las direcciones 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>');
    };
}

Busqué en Google algo nuevo y me encontré con este:

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

demostración: http://jsfiddle.net/kachibito/hEgvc/1/

Funciona muy bien para enlaces normales.

El mejor script para hacer esto: http://benalman.com/projects/javascript-linkify-process-lin/

Esta solución funciona como muchas de las otras, y de hecho usa la misma expresión regular que una de ellas, sin embargo, en lugar de devolver una Cadena HTML, devolverá un fragmento de documento que contiene el elemento A y los nodos de texto aplicables.

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

Hay algunas advertencias, a saber, con soporte para IE y textContent más antiguos.

Aquí hay una demostración.

Si necesita mostrar un enlace más corto (solo dominio), pero con la misma URL larga, puede probar mi modificación de la versión del código de Sam Hasler publicada anteriormente

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

A continuación se presentan algunas cadenas probadas:

1. Encuéntrame en www.google.com
2. www
3. Encuéntrame en www. http://www.com
4. Sígueme en: http://www.nishantwork.wordpress.com
5. http://www.nishantwork.wordpress.com
6. Sígueme en: http://www.nishantwork.wordpress.com
7. https://stackoverflow.com/users/430803/nishant

Nota: Si no desea pasar wwwcomo válido solo use el siguiente reg ex: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig

Deben tenerse en cuenta las advertencias sobre la complejidad de URI, pero la respuesta simple a su pregunta es:
Para reemplazar cada coincidencia, debe agregar el /gindicador al final de 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/>(");
}

ejemplo simple

¡Mantenlo simple! Di lo que no puedes tener, en lugar de lo que puedes tener :)

Como se mencionó anteriormente, las URL pueden ser bastante complejas, especialmente después del '?', Y no todas comienzan con un 'www'. p.ejmaps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

Entonces, en lugar de tener una expresión regular compleja que no cumpla con todos los casos límite, y será difícil de mantener, ¿qué tal este mucho más simple, que funciona bien para mí en la práctica?

Partido

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

www. (anything but a space)+

Donde 'cualquier cosa' es [^'"<>\s] ... básicamente una coincidencia codiciosa, llevándote a un espacio, una cita, un ángulo o un final de línea

También:

Recuerde verificar que aún no esté en formato URL, por ejemplo, el texto contiene href="..."osrc="..."

Añadir ref = nofollow (si corresponde)

Esta solución no es tan "buena" como las bibliotecas mencionadas anteriormente, pero es mucho más simple y funciona bien en la práctica.

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;

La detección correcta de URL con dominios internacionales y soporte de caracteres astrales no es algo trivial. linkify-itla biblioteca construye expresiones regulares desde muchas condiciones , y el tamaño final es de aproximadamente 6 kilobytes :). Es más preciso que todas las bibliotecas, actualmente se hace referencia en la respuesta aceptada.

Vea la demostración de linkify-it para ver en vivo todos los casos límite y probar los suyos.

Si necesita vincular la fuente HTML, primero debe analizarla e iterar cada token de texto por separado.

He escrito otra biblioteca de JavaScript, podría ser mejor para usted, ya que es muy sensible con los menos falsos positivos posibles, rápido y de tamaño pequeño. Actualmente lo estoy manteniendo activamente, así que pruébelo en la página de demostración y vea cómo funcionaría para usted.

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

Tuve que hacer lo contrario y hacer enlaces html solo en la URL, pero modifiqué su expresión regular y funciona de maravilla, gracias :)

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

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

La detección de correo electrónico en la respuesta de Travitron anterior no funcionó para mí, por lo que la extendí / reemplacé con lo siguiente (código 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);

Esto permite direcciones de correo electrónico como " [email protected] ".

Después de la entrada de varias fuentes, ahora tengo una solución que funciona bien. Tenía que ver con escribir su propio código de reemplazo.

Respuesta .

Violín .

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

Reemplace las URL en el texto con enlaces HTML, ignore las URL dentro de una etiqueta href / pre. https://github.com/JimLiu/auto-link

Aquí está mi solución:

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

Pruebe la siguiente función:

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

Pruebe a continuación la solución

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