site
header
Rendez-vous sur Arrakis
Le site perso d'un hacker libriste curieux crêpophile et étourdi

Des émojis dans vos page web - 2

Je vous présentais il y a peu un bout de code pour automatiquement remplacer certaines chaînes de caractères en smileys. Cependant, on m'a fait remarquer que ces substitutions avaient lieu aussi dans les balises code et pre. Pas chouette :/

J'ai donc repris le code pour corriger ce défaut. Si ça vous intéresse, copiez/collez le code ci-dessous dans vos pages html :


 <script>
 // regexp and replacement
 var strtostr= [
     [/(\s|&nbsp;):\)/g,' 😊'],
     [/(\s|&nbsp;):\(/g,' 😞'],
     [/(\s|&nbsp;):D/g,' 😃'],
     [/(\s|&nbsp;):S/g,' 😖'],
     [/(\s|&nbsp;):s/g,' 😖'],
     [/(\s|&nbsp;):P/g,' 😋'],
     [/(\s|&nbsp;):p/g,' 😋'],
     [/(\s|&nbsp;);\)/g,' 😉'],
     [/(\s|&nbsp;);-\)/g,' 😉'],
     [/(\s|&nbsp;):\//g,' 😕'],
     [/(\s|&nbsp;):\|/g,' 😒'],
     [/(\s|&nbsp;):\'\(/g,' 😢'],
     [/(\s|&nbsp;)oO/g,' 😲'],
     [/(\s|&nbsp;)x\.x/g,' 😵'],
     [/(\s|&nbsp;)O:\)/g,' 😇'],
     [/(\s|&nbsp;)\^\^/g,' 😊']
 ];
 
 // class div where regexp will be applied
 var classes_to_replace = ["com-content", "art-content", "post-content"];
 
 // regexp to find tags (no replacement in <pre> and <code>
 var htmlTagRegex =/(<[^>]*>)/g
 
 // loop in classes
 classes_to_replace.forEach(function (class_) {
     var tochange = document.getElementsByClassName(class_);
     var codecnt = 0;
 
     var classcnt;
     for (classcnt = 0; classcnt < tochange.length; classcnt++) {
         div = tochange[classcnt]
 
         // check if in <code> or <pre>
         var tagArray = div.innerHTML.split(htmlTagRegex);
         var divtxt = "";
         var tagcnt;
         for (tagcnt = 0; tagcnt < tagArray.length; tagcnt++) {
             t = tagArray[tagcnt];
             console.log(t);
             if (t.toLowerCase() == "<pre>" || t == "<code>") {
                 codecnt++;
             } else if (t.toLowerCase() == "</pre>" || t == "</code>") {
                 codecnt--;
             }
         
             if (codecnt == 0) {
                 var i;
                 var newtxt = "";
                 for (i = 0; i < strtostr.length; i++) {
                     t = t.replace(strtostr[i][0],strtostr[i][1]);
                 }
             }
             divtxt += t;
         }
         div.innerHTML = divtxt;
     }
 });
 </script>
 

Pour ajouter d'autres smileys, modifiez le tableau strtostr.
Par défaut, le script est prêt pour le moteur de blog blogotext (parce qu'il est super), et ne réalise les substitutions que dans les conteneurs de ces classes : "com-content", "art-content", "post-content", "entry-content".

Voilà voilà, amusez-vous bien ;)

EDIT : j'ai modifié le code car blogotext génère des &nbsp; que les regexp ne reconnaissent pas comme espace :s

le 18/11/2016 à 13:19:08, Starsheep a dit :

Coucou !

Cool ! :) Mais ça marche comme un plugin ou il faut le mettre dans le template ?

le 18/11/2016 à 13:21:21, thuban a dit :

Pour l'instant, c'est à mettre dans le fichier list.html .

Le plugin est en cours de route : https://github.com/B4rb3rouss/blogotext-addons/tree/smileys ;)

(d'ailleurs je l'ai mis sur ce blog :) )

le 18/11/2016 à 13:28:38, Starsheep a dit :

Ah cool ! Bon ben je vais attendre le plugin. :)

Et tiens je vais voir pour en écrire un... :)

le 18/11/2016 à 13:31:32, thuban a dit :

Amuse-toi bien :)
Moi je vais essayer d'améliorer les regexp, y a un peu de boulot.