1. Services|
2. Références|
3. Articles|
4. Didacticiels|
5. Ressources|
6. Jobs|
7. Contact|
8. Termes|
9. Aide|
10. Sitemap|

Citation du jour

Vae Soli! : le système de substitutions s'enrichit d'expressions régulières

Cela fait très longtemps que c'est sur nos tablettes. Ça y est. C'est fait ! Il s'agissait d'enrichir les substitutions (feature assez unique de Vae Soli!) avec des expressions régulières.

Zoom arrière. Les substitutions. C'est quoi ? Vae Soli! permet de substituer des chaînes de caractères avec d'autres chaînes de caractères juste avant d'envoyer le résultat au browser du client. Par exemple, vous avez tout un texte où le numéro de téléphone de votre entreprise se trouve mentionné plusieurs fois. Le problème, c'est que vous allez déménager et changer de numéro de téléphone (peut-être). Voilà typiquement un cas où les substitutions sont un avantage indéniable car, au lieu de ce numéro directement dans votre texte, vous pouvez mentionner une chaîne, par exemple {tel} qui sera ensuite modifiée en +32 71 71 17 43 (c'est un simple exemple) : on substitue '{tel}' par '+32 71 71 17 43' dans TOUT le texte. Voilà le principe de substitutions expliqué (des substitutions fixes).

Maintenant, il se peut que certaines parties des substitutions soient variables. C'est ici que les expressions régulières viennent à notre secours. Prenons un exemple concret.

Nous écrivons le deuxième volet du didacticiel HTML5. Nous souhaitons introduire une série de nouvelles balises : les balises <footer>…</footer>, <header>…</header> et <nav>…</nav>. Mais pour que ces balises apparaissent dans le texte comme vous les visualisez, il faut que nous les écrivions de la manière suivante :

• <code><footer>…</footer></code>
• <code><header>…</header></code>
• </code><nav>…</nav></code>

Pfffff … l'angoisse ! Alors on a préféré écrire UNE substitution sous forme de regex : {Tag('ici le tag désiré')} pour que cette transformation se fasse toute seule. Voici la substitution écrite sous forme d'expression régulière :

<Data key="\{Tag\((['])(.*?)\1\)\}" active="yes" editable="yes" regex="yes">
    <Value><![CDATA[<code>&lt;\2&gt;&hellip;&lt;/\2&gt;</code>]]></Value>
</Data>

La première parenthèse ((['])) vise à isoler les guillemets, simples ou doubles (ici simples). Elle est reprise en bleu. La référence à cette première partie variable se retrouve aussi avec le \1 (en fait les guillemets, simples ou doubles, doivent être balancés). La deuxième paranthèse, reprise en vert, est en fait le véritable argument de l'expression régulière : ce sera le nom du tag qu'on veut reproduire (header, footer ou nav dans notre cas). On retrouve la référence à cette deuxième parenthèse dans la valeur de substitution (\2). Nous vous avouons que cela peut être un peu cryptique.

Une fois la subsitution mise en place il nous suffira d'écrire {Tag('footer')} dans le code pour que cela apparaisse comme <footer>…</footer>. Le tour est joué : plus besoin d'écrire ces trucs longuets comme nous le mentionnions avant notre admirable Pfffff. Le côté magique de la chose c'est que cela fonctionne maintenant pour n'importe quel tag. Tenez, voici le tag div : <div>…</div> ({Tag('div')}), le tag address, <address>…</address> ({Tag('address')}), …

Les expressions régulières dans les substitutions est une possibilité de la version 5.0.0005 de Vae Soli!, une version qui n'a pas encore été rendue disponible au public, du moins à l'heure où nous écrivons ces lignes (eh, oui ! désolé … mais rassurez-vous, cela ne saurait tarder !).