Convertissez le texte en hyperliens <a> et en balises d'image <img>.

Question

J'utilise cette fonction pour convertir du texte en liens cliquables ( <a href=""> </a> ) et les urls des images dans les balises img ( <img src="" /> ).

const parsecontent = (text)=>{
    var ishyperlink= /([^\S]|^)((https?\:\/\/)(\S+))/gi;
    return (text || "").replace(ishyperlink,
    function(match, space, url){
       var isimglink = /https?:\/\/.*\.(?:png|jpg|gif|jpeg)/i;
        if (url.match(isimglink)) {
         return space + '<a href="' + url + '"><img src="' + url + '" /></a>';
        }
     return space + '<a href="' + url + '">' + url + '</a>';
    }
  );
}

En utilisant comme ceci

const div = document.querySelector("#content");
div.innerHTML = parsecontent(div.innerHTML);

Cela fonctionne bien, si le contenu comporte des espaces appropriés. Si les liens et les urls des images ne sont pas séparés par des espaces, le système échoue. Pouvez-vous m'aider à résoudre ce problème ?

Codepen ici https://codepen.io/dagalti/pen/GRqpYLp

Answer 1

J'ai trouvé une expression rationnelle qui est conçue pour satisfaire vos tests.

Cette expression rationnelle est la façon dont nous allons rechercher une URL :

((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))

Dans votre exemple, nous avons 2 urls ensemble sans espace entre elles. Que se passe-t-il si nous avons une url et une chaîne non-url sans espace entre les deux ? Nous avons pourrait mettre fin à la correspondance lorsqu'elle atteint un TLD (tel que .com , .org etc). Cependant, pour satisfaire votre exemple, je pars du principe que nous avons affaire à 2 urls séparées par aucun espace. Dans ce cas, nous voulons mettre fin à la correspondance lorsque nous remarquons le début d'une nouvelle url. (?=https?) :

([^\S]|^)((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))(?=https?)

Ensuite, nous voulons faire correspondre les urls qui sont entourées d'espaces :

((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))

En mettant tout ça ensemble, on obtient cette regex :

([^\S]|^)((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))(?=https?)|((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))

Nous devons ajuster votre replace logique un peu aussi :

const parsecontent = (text)=>{
    var ishyperlink= /([^\S]|^)((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))(?=https?)|((https?\:\/\/)([\w!"#$%&\'()*+,-./@:;=\^_`{|}~]*))/gi;
    return (text || "").replace(ishyperlink,
    function(url){
       var isimglink = /https?:\/\/.*\.(?:png|jpg|gif|jpeg)/i;
        if (url.match(isimglink)) {
         return '<a href="' + url + '"><img src="' + url + '" /></a>';
        }
     return '<a href="' + url + '">' + url + '</a>';
    }
  );
}

Cette regex est assez verbeuse, il peut y avoir des moyens plus succincts de satisfaire vos cas de test (je ne suis pas une regexpert cependant)