BBcode personnalisé et balise [code]

[DidgeriDude]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://neverwinter.forumactif.org/

Description du problème

Bonjour à tous.

Le souci que je rencontre fait suite à l'ajout de BBcode personnalisé dans le forum que j'administre.
J'utilise le code ci-dessous pour mettre en forme des messages à l'aide de balises personnalisées. Le code est simple : il ne fait que remplacer les occurrences du BBcode par un <span class="xxx">[...]</span> adéquat dans le corps des messages.
Le souci est qu'il modifie toutes les occurrences, or il serait judicieux que celles situées entre des balises code et /code ne soient pas affectées.

Voici le script :

Code:

$(function() {

/*
    L'objet /balises/ a pour identifiant la balise
    et pour valeur le nom de la classe <span> pour la mise en forme
*/

    var balises = {
        rech: 'recherche',
        rare: 'rare',
        epic: 'epique',
        lgnd: 'legendaire',
        car: 'caracteristique',
        stat: 'statistique',
        tal: 'talent',
        pwr: 'pouvoir'
    };

    $("div.postbody div.content").each(function() {
        var $post = $(this);
        var contenu = $post.html();
           
        for (var bal in balises) {
            var motif = new RegExp("\\[" + bal + "\\](.*?)\\[\\/" + bal + "\\]","g");
            var remplacement = '<span class="' + balises[bal] + '">$1</span>';
   
            if (motif.test(contenu)) {
                contenu = contenu.replace(motif, remplacement);
            }
        }

        $post.html(contenu);
    });
});

J'ai bien une idée : encapsuler mon motif dans un truc du genre
<code>.* + motif + .*</code>,
et faire un test dessus, mais ça ne marche pas. Je pense que mon expression régulière est bancale.
Si vous avez une idée, merci d'avance.

Didg'.

[Self]

..	Bonjour et Bienvenue sur le Forum des Forums ForumActif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : mail de fondation - Ce qu'il ne faut pas faire Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de ForumActif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

..

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou à faire un UP régulièrement ! Ce sujet est corbeillé (rappel de pourquoi), merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum. A bientôt sur ForumActif

[Self]

Replacé à la demande de l'auteur !

[DidgeriDude]

Bonjour à tous.

Je me réponds à moi-même et vous propose une solution à ce problème. Elle n'est pas des plus élégantes d'un point de vue algorithmique, mais a le mérite de fonctionner.
Le principe est simple : préfixer les balises BBcode personnalisées situées entre des balises code afin que celles-ci soient ignorées durant le remplacement global, puis enlever ce préfixe pour leur redonner leur nom original.

Code:

$(function() {

/*
    L'objet /balises/ a pour identifiant la balise
    et pour valeur le nom de la classe <span> pour la mise en forme
*/

    var balises = {
        rech: 'recherche',
        rare: 'rare',
        epic: 'epique',
        lgnd: 'legendaire',
        car: 'caracteristique',
        stat: 'statistique',
        tal: 'talent',
        pwr: 'pouvoir'
    };

    $("div.postbody div.content").each(function() {

        var $post = $(this);

        for (var bal in balises) {
           
            /*
                Pour modifier les balises situées entre des balises de codes
            */
            var motif1 = new RegExp("\\[(\\/?)" + bal + "\\]","g");
            var rplmt1 = '[$1code' + bal + ']';
           
            /*
                Pour remplacer les balises
            */
            var motif = new RegExp("\\[" + bal + "\\](.*?)\\[\\/" + bal + "\\]","g");
            var remplacement = '<span class="' + balises[bal] + '">$1</span>';

            /*
                Pour rétablir les noms originaux des balises
            */
            var motif2 = new RegExp("\\[(\\/?)code" + bal + "\\]","g");
            var rplmt2 = '[$1' + bal + ']';
           
            $post
                .find('dl.codebox > dd > code').each(function() {
                    $(this).html($(this).html().replace(motif1, rplmt1));
                })
                .end()
                .html($post.html().replace(motif, remplacement))
                .find('dl.codebox > dd > code').each(function() {
                    $(this).html($(this).html().replace(motif2, rplmt2));
                })
                .end();
        }
    });
});

Bien que le sujet soit résolu, je ne le signale pas encore comme tel afin de me laisser 3/4 jours, à vous ou à moi-même, pour proposer une solution qui relève moins de la bidouille

[Ea]

Bonjour,


Je ne connaissais pas .end(), merci.

Cela a l'air déjà pas mal comme ça, moi j'aurais utilisé match et split pour ce cas-ci :

Code:

var matches = contenu.match(/<code>[\s\S]*?<\/code>/g); /* tableau avec les <code>...</code> */
var splits = contenu.split(/<code>[\s\S]*?<\/code>/g); /* tableau avec le reste */

var mash = splits[0].replace(/cloud/ig,"butt");

for(var i=0; i<matches.length; i++) {
  mash += matches[i] + splits[i+1].replace(/cloud/ig,"butt"); 
}

Ce qui donnerait en le combinant avec le premier post :

Code:

$(function() {

/*
    L'objet /balises/ a pour identifiant la balise
    et pour valeur le nom de la classe <span> pour la mise en forme
*/

    var balises = {
        rech: 'recherche',
        rare: 'rare',
        epic: 'epique',
        lgnd: 'legendaire',
        car: 'caracteristique',
        stat: 'statistique',
        tal: 'talent',
        pwr: 'pouvoir'
    };
   
    var motifs = [];
    var repls = [];
    var quickies = [];
   
    for (var bal in balises) {
      motifs.push(new RegExp("\\[" + bal + "\\](.*?)\\[\\/" + bal + "\\]","g"));
      repls.push('<span class="' + balises[bal] + '">$1</span>');
      quickies.push('[/'+bal+']');
    }

    var code_motif = /<code>[\s\S]*?<\/code>/g;

    var replaceArray = function(find, replace, indices, content) {
      for(var i=0; i < indices.length; i++) {
        content = content.replace(find[indices[i]], replace[indices[i]]);
      }
      return content;
    };
 
    $("div.postbody div.content").each(function() {
        var $post = $(this);
        var contenu = $post.html();

        /* test rapide pour voir si il y a une balise [/...] */
        var indices = [];           
        for(var i=0; i < quickies.length; i++)
          if(contenu.indexOf(quickies[i])!=-1)
            indices.push(i);

        if(indices.length==0)
          return;
         
        var matches = contenu.match(code_motif)||[];
        var splits = contenu.split(code_motif);
 
        var mash = replaceArray(motifs, repls, indices, splits[0]);

        for (var i= 0; i < matches.length; i++) {
            mash += matches[i] + replaceArray(motifs, repls, indices, splits[i+1]);
        }
 
        $post.html(mash);
    });
});

Cordialement.

[Chacha]

..	Bonjour, Attention, cela fait 9 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir délester votre sujet, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, dans ce cas, votre premier message et cochez l'icône A bientôt sur ForumActif

[DidgeriDude]

Bonjour.

Merci Ea pour ta contribution et ton code.
J'ai mis un peu de temps à le comprendre

J'aime bien le principe de ta fonction, avec les tableaux de motifs, car elle se base bien sur l'analyse du contenu comme j'aimerais... Par contre, je choisirai tout de même le code que j'ai fourni car il est plus simple dans son fonctionnement.

Quand à .end(), oui c'est bien pratique pour un chaînage de méthodes ne portant pas toutes sur « l'objet de départ », mais sur des sous-ensembles de celui-ci ; il met fin au chaînage sur la partie sélectionnée par le .find(), tout en restant dans le chaînage de départ... Vraiment très pratique

J'ai tenté une autre approche via une expression régulière du type :

Code:

new RegExp("\\[rare\\](.*?)\\[\\/rare\\](?!.*?<\\/code>)","g")

utilisant les lookahead négatifs, afin de rechercher une chaîne du type [rare]blabla[/rare], non suivie d'un certain nombre de caractères puis d'un </code>.
Mais ça ne marche pas...

Je passe tout de même ce sujet en résolu, mais si quelqu'un peut aller plus loin avec les regex...
Encore merci Ea pour ton aide.

Didg'.