Je vous présentait 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 :

    // regexp and replacement
    var strtostr= [
        [/:\\)/g,'😊'], 
        [/:\\(/g,'😞'], 
        [/:D/g,'😃'],
        [/:S/g,'😖'],
        [/:s/g,'😖'],
        [/:P/g,'😋'],
        [/:p/g,'😋'],
        [/;\\)/g,'😉'],
        [/;-\\)/g,'😉'],
        [/:\\//g,'😕'],
        [/:\\|/g,'😒'],
        [/:\\'\\(/g,'😢'],
        [/oO/g,'😲'],
        [/x\\.x/g,'😵'],
        [/O:\\)/g,'😇'],
        [/\\^\\^/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 
 and 
    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  or 
            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() == "
" || t == "") {
                    codecnt++;
                }
                else if (t.toLowerCase() == "
" || t == "") {
                    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;
        }
    });



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

Original post of Thuban.Votez pour ce billet sur Planet Libre.
Articles similaires
Progi1984 : Embarquer des PDF dans une page Web avec pdf.js (16/06/2014)